原型和闭包是Js语言的难点,此文主要讲原型。

每一个方法都有一个属性是 prototype
每一个对象都有一个属性是 _proto_
一旦定义了原型属性或原型方法,则所有通过该构造函数实例化出来的所有对象,都继承了这些原型属性和原型方法,这是通过内部的_proto_链来实现的。

/* Js所有的函数都有一个prototype属性,这个属性引用了一个对象,即原型对象,也简称原型。这个函数包括构造函数和普通函数,我们讲的更多是构造函数的原型,但是也不能否定普通函数也有原型。
每一个方法都有一个属性叫做原型(prototype)
prototype的定义:不需要显式地声明一个prototype属性,因为在每一个构造函数中都有它的存在。 */

譬如普通函数:
function Test(){

}
console.log("exp1 : " + Test.prototype); //  [object Object]

console.log("exp1 : " + Test.prototype instanceof Object) //true

譬如构造函数,也即构造对象。首先了解下通过构造函数实例化对象的过程。

function A(x){
  this.x=x;
}
var obj=new A(1);

实例化obj对象有三步:

  1. 创建obj对象:obj=new Object();

  2. 将obj的内部__proto__指向构造他的函数A的prototype,obj.constructor.prototype与的内部_proto_是两码事,实例化对象时用的是_proto_,obj是没有prototype属性的,但是有内部的__proto__,通过__proto__来取得原型链上的原型属性和原型方法

  3.将obj作为this去调用构造函数A,从而设置成员(即对象属性和对象方法)并初始化。

一旦定义了原型属性或原型方法,则所有通过该构造函数实例化出来的所有对象,都继承了这些原型属性和原型方法,这是通过内部的_proto_链来实现的。

譬如: A.prototype.say=function(){alert("Hi")};

那所有的A的对象都具有了say方法,这个原型对象的say方法是唯一的副本给大家共享的,而不是每一个对象都有关于say方法的一个副本。

以下通过几个实例来深入理解prototype:

/* exp2:start...*/
/*
给prototype添加属性
prototype是一个对象,因此,你能够给它添加属性。
你添加给prototype的属性将会成为使用这个构造函数创建的对象的通用属性。 */
function Fish(name, color){
  this.name = name;
  this.color = color;
}
Fish.prototype.livesIn = 'water';
Fish.prototype.price = 20;

//构造
var fish1 = new Fish('mackarel', 'gray');
var fish2 = new Fish('goldfish', 'orange');
var fish3 = new Fish('salmon', 'white');

for (var i = 1; i <= 3; i++){
  var fish = eval('fish' + i); // 取得指向这条鱼的指针
  console.log("exp2 : " + fish.name + ',' + fish.color + ',' + fish.livesIn + ',' + fish.price);
}

//mackarel,gray,water,20
//goldfish,orange,water,20
//salmon,white,water,20

/* exp2:end...*/

/* exp3:start...*/
/* 当一个对象被创建时,这个构造函数将会把它的属性prototype赋给新对象的内部属性__proto__。这个__proto__被这个对象用来查找它的属性。 */
function Employee(name, salary){
  this.name = name;
  this.salary = salary;
}
/* Employee的所有对象都具有getSalary()和addSalary()方法,此原型对象的这两个方法是是唯一的,也是共享的,
  并非Employee的所有对象都拥有此方法(非一一对应,而是多对一) */
Employee.prototype.getSalary = function getSalaryFunction(){
  return this.salary;
}
Employee.prototype.addSalary = function addSalaryFunction(addition){
  return this.salary = this.salary + addition;
}
var boss1 = new Employee('Jon', 200000);
var boss2 = new Employee('Kim', 100000);
var boss3 = new Employee('Sam', 150000);

console.log("exp3 : " + boss1.getSalary()); // 输出 200000
console.log("exp3 : " + boss2.getSalary()); // 输出 100000
console.log("exp3 : " + boss3.getSalary()); // 输出 150000

console.log("exp3 : " + boss1.addSalary(5000)); // 输出 205000
console.log("exp3 : " + boss2.addSalary(5000)); // 输出 105000
console.log("exp3 : " + boss3.addSalary(5000)); // 输出 155000

/* exp3:end...*/

/* exp4:start...*/
function F() {}
var i = new F();
console.log("exp4 : i.prototype : " + i.prototype + " , F.prototype : " + F.prototype ,", i.__proto__ : " + i.__proto__ + " , F.__proto__ : " + F. __proto__);
//exp4 : i.prototype : undefined , F.prototype : [object Object] , i.__proto__ : [object Object] , F.__proto__ : function Empty() {}
/* exp4:end...*/

简单理解javascript的原型prototype的更多相关文章

  1. 简单理解JavaScript原型链

    简单理解原型链 什么是原型 ? 我是这样理解的:每一个JavaScript对象在创建的时候就会与之关联另外一个特殊的对象,这个对象就是我们常说的原型对象,每一个对象都会从原型"继承" ...

  2. 理解 JavaScript 对象原型、原型链如何工作、如何向 prototype 属性添加新的方法。

    JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个对象拥有一个原型对象,对象以其原型为模板.从原型继承方法和属性.原型对象也可能拥有原型, ...

  3. 悟透Javascript之 原型prototype

    构造函数的Prototype上定义的方法确实可以通过对象直接调用,而且代码是共享的.我表示我不懂.太难理解了,艹.在Javascript中,prototype不但能让对象共享自己的财富,而且proto ...

  4. 三张图较为好理解JavaScript的原型对象与原型链

    最近从网上看到别人详细得讲解了js的原型对象和原型链,看完感觉是看得最清晰的一个,于是,摘录到自己博客里 对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与_ ...

  5. 深入理解Javascript中this, prototype, constructor

    在Javascript面向对象编程中经常需要使用到this,prototype和constructor这3个关键字. 1.首先介绍一下this的使用:this表示当前对象;如果在全局中使用this,则 ...

  6. 理解JavaScript 的原型属性

    1.原型继承 面向对象编程可以通过很多途径实现.其他的语言,比如 Java,使用基于类的模型实现: 类及对象实例区别对待.但在 JavaScript 中没有类的概念,取而代之的是一切皆对象.JavaS ...

  7. JavaScript 面向对象 原型(prototype) 继承

    1.对象的概念:无需属性的集合,属性可以为数值,对象或函数,ECMAscript中没有类的概念,这点是javascript与其他面向对象(OO)语言不同的地方. //创建一个自定义对象 var per ...

  8. javascript之原型prototype

    理解JavaScript原型 http://blog.jobbole.com/9648/ Web程序员应该知道的Javascript prototype原理 http://www.leonzhang. ...

  9. 彻底理解JavaScript中的prototype、__proto__

    虽然在JavaScript里一切皆对象,但为了理解原型链系统,我们需要将JavaScript的对象分为对象和函数两大类.在此基础上,JavaScript的原型链逻辑遵从以下通用规则: 对象有__pro ...

随机推荐

  1. Android Immersive Mode (沉浸模式) 还是 Translucent Bars (透明状态栏)

    Immersive Mode (沉浸模式) 还是 Translucent Bars (透明状态栏) [科普]什么叫真正的“沉浸式”状态栏? 为什么在国内会有很多用户把「透明栏」(Translucent ...

  2. Coder-Strike 2014 - Finals (online edition, Div. 2) B. Start Up

    需要满足的条件是 (1)每个字母是对称的 (2)每个字符串是对称的 #include <iostream> #include <algorithm> #include < ...

  3. 关于NSNotificationCenter消息通信用法

    NSNotificationCenter主要用于广播消息到多个监听着,其传统用法 - (void)viewDidLoad { [super viewDidLoad]; [[NSNotification ...

  4. continue 语句

    停止循环的当前迭代,并开始新的迭代. continue [label]; 可选的 label 参数指定 continue 应用于哪条语句. 说明 只能在 while.do...while.for.或  ...

  5. [LintCode] Swap Two Nodes in Linked List 交换链表中的两个结点

    Given a linked list and two values v1 and v2. Swap the two nodes in the linked list with values v1 a ...

  6. hibernate 中如何用注解映射定长字符类型char(2)

    如果是用xml的方式配置映射,可以在<column>标签的sql-type属性中设置char(2),比如: <property name="age" type=& ...

  7. php全面获取url地址栏及各种参数

    <?php echo $_SERVER['HTTP_HOST']."<br>";//获取域名或主机地址 echo $_SERVER["SERVER_PO ...

  8. 数的长度---nyoj69

    超时 #include <stdio.h>#include <string.h>#define M 1000001int shu[M]; int main(){ int n, ...

  9. Android课程---qq登陆页面(练习)

    AndroidManifest.xml <?xml version="1.0" encoding="utf-8"?> <manifest xm ...

  10. 一封给JVM懵懂者的情书【不看错过一生幸福】

    别说你懂我 你只是在意Java你把我留在家里身和心却始终在她那里难道我只是她的附属品?错,我是我,我是JVM,没有我就没有他! 如果你想懂我或者不管你是否懂我我都在这里等你---[深入JVM内核—原理 ...