JavaScript详解原型和原型链

原型和原型链

一、prototype

• 在JavaScript中，prototype对象是实现面向对象的一个重要机制。
• 每个函数就是一个对象（Function），函数对象都有一个子对象prototype对象，类是以函数的形式来定义的。prototype表示该函数的原型，也表示一个类的成员的集合。
• 每个函数都有一个prototype属性，这个属性指向函数的原型对象。

例一 JavaScript原生对象

例二 构造函数

function Person() { 

}
Person.prototype.name = 'zhangsan'
var person1 = new Person()
var person2 = new Person()
console.log(person1.name)   //zhangsan 
console.log(person2.name)   //zhangsan

• 例二中,函数的prototype指向了一个对象，而这个对象正是调用构造函数时创建的实例的原型，也就是person1和person2的原型。
  原型的概念：每一个javascript对象(除null外)创建的时候，就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型中“继承”属性。
  让我们用一张图表示构造函数和实例原型之间的关系：
  

二、__ proto __

• 每个对象(除null外)都会有的属性，叫做__proto__，这个属性会指向该对象的原型。

function Person() {

}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true

• console.log(person.__proto__ === Person.prototype); // true

• 综上所述,我们可以得到一张新的关系图
  
• 补充说明：
• 绝大部分浏览器都支持这个非标准的方法访问原型，然而它并不存在于 Person.prototype 中，实际上，它是来自于 Object.prototype ，与其说是一个属性，不如说是一个 getter/setter，当使用 obj.__ proto__ 时，可以理解成返回了 Object.getPrototypeOf(obj)。

三、constructor

• 每个原型都有一个constructor属性，指向该原型关联的构造函数。

function Person() {

}
console.log(Person===Person.prototype.constructor)  //true

• Person===Person.prototype.constructor
  
• 我们更新一下关系图
  
• constructor补充说明

function Person() {

}
var person = new Person();
console.log(person.constructor === Person); // true

• 当获取 person.constructor 时，其实 person 中并没有 constructor 属性,当不能读取到constructor 属性时，会从 person 的原型也就是 Person.prototype 中读取，正好原型中有该属性，所以：

• person.constructor === Person.prototype.constructor
  

四、实例与原型、原型的原型

• 实例与原型
• 当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层为止。

function Person() {

}

Person.prototype.name = 'zhangsan';

var person = new Person();

person.name = 'lisi';
console.log(person.name) // lisi

delete person.name;      //删除person name 属性
console.log(person.name) // zhangsan

• 在这个例子中，我们给实例对象 person 添加了 name 属性，当我们打印 person.name 的时候，结果自然为 lisi。
  但是当我们删除了 person 的 name 属性时，读取 person.name，从 person 对象中找不到 name 属性就会从 person 的原型也就是 person.__ proto__ ，也就是 Person.prototype中查找，幸运的是我们找到了 name 属性，结果为 zhangsan。
• 但是万一还没有找到呢？原型的原型又是什么呢？
• 原型的原型
• 在前面，我们已经讲了原型也是一个对象，既然是对象，我们就可以用最原始的方式创建它，那就是：

var obj = new Object();
obj.name = 'zhangsan'
console.log(obj.name) // zhangsan

• 其实原型对象就是通过 Object 构造函数生成的，结合之前所讲，实例的 __ proto__ 指向构造函数的 prototype
• 这时我们可以再次更新关系图：
  

五、原型链

• 简单的回顾一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。那么假如我们让原型对象等于另一个类型的实例，结果会怎样？显然，此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立。如此层层递进，就构成了实例与原型的链条。这就是所谓的原型链的基本概念。
  ——摘自《javascript高级程序设计》

• 那么Object.prototype 的原型呢？

• console.log(Object.prototype.__proto__ === null) // true

• 引用阮一峰老师的 《undefined与null的区别》 就是：
  null 表示“没有对象”，即该处不应该有值。

所以 Object.prototype.proto 的值为 null 跟 Object.prototype 没有原型，其实表达了一个意思。

所以查找属性的时候查到 Object.prototype 就可以停止查找了。

综上所述,关系图最终更新为：

new运算符的实现原理

当我们用new运算符new一个构造函数产生一个实例时，比如说： var obj = new Func 时，其背后的步骤是这样的：

1：创建一个继承自 Func.prototype 的新对象；
2：执行构造函数 Func ，执行的时候，相应的传参会被传入，同时上下文(this)会被指定为第一步创建的新实例；
3：如果构造函数返回了一个“对象”,那么这个对象会取代步骤1中new出来的实例被返回。如果构造函数没有返回对象,那么new出来的结果为步骤1创建的对象。

注意：new Func 等同于new Func()，只能用在不传递任何参数的情况。

按照上述原理，写一段代码模拟new运算符的实现原理：

var new1 = function(fun){
    var newObj = Object.create(fun.prototype);
    var returnObj = fun.call(newObj);
    if(typeof returnObj === 'object'){
        return returnObj
    }else{
        return newObj
    }
}

Object.create()方法Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。
var newObj = Object.create(fun.prototype) 的意思是：创建一个新对象newObj，并让 newObj.__ proto__ 指向 fun，即 newObj.__ proto__ === fun 返回true。

• 模拟new运算符之后进行验证
  
  

instanceof判断数据类型

• instanceof是判断实例对象的__proto__和生成该实例的构造函数的prototype是不是引用的同一个地址。
  是返回true，否返回false。
• 注意：实例的instanceof在比较的时候，与原型链上向上找的的构造函数相比都是true。
• instanceof用来判断A是否为B的实例，表达式为：A instanceof B，如果A是B的实例，则返回true，否则返回false。instanceof检测的是原型，内部机制是通过判断对象的原型链中是否有类型的原型。

{} instanceof Object; //true
[] instanceof Array;  //true
[] instanceof Object; //true
"123" instanceof String; //false
new String(123) instanceof String; //true

function Person1(){}
function Person2(){}
let person1=new Person1()
let person2=new Person2()
console.log(person1 instanceof Person1) //true
console.log(person2 instanceof Person2) //true
console.log(person1 instanceof Person2) //false

• 我们可以用下面的代码实现instanceof。

function instance(left,right){
    let prototype = right.prototype;  //获取类型的原型
    let proto = left.__proto__;       //获取对象的原型
    while(true){    //循环判断对象的原型是否等于类型的原型，直到对象原型为null，因为原型链最终为null
       if (proto === null || proto === undefined){
           return false;
       }
       if (proto === prototype){
           return true;
       }
       proto = proto.__proto__;
     }
}
console.log(instance({},Object)); //true
console.log(instance([],Number)); //false

• 那怎么判断实例是由哪个构造函数生成的呢？这时候就要用到constructor了。
• 实例的原型的构造函数， obj.__ proto__.constructor
• 当一个函数F被定义时，JS引擎会为F添加prototype原型，然后在prototype上添加一个constructor属性，并让其指向F的引用，F利用原型对象的constructor属性引用了自身，当F作为构造函数创建对象时，原型上的constructor属性被遗传到了新创建的对象上，从原型链角度讲，构造函数F就是新对象的类型。这样做的意义是，让对象诞生以后，就具有可追溯的数据类型。
  
  

实例方法与静态方法

• 静态方法：

function Person(){}
Person.sayHello=function(){
    console.log("Hello world")
}
Person.sayHello()

• 实例方法：

function Person(){}
Person.prototype.sayHello=function(){
   console.log("Hello world")
}
let person=new Person()
person.sayHello()

静态方法：在构造函数本身上定义的方法，只能通过构造函数本身调用，new出来的对象不能够调用。

动态方法：也叫做实例方法，它是通过prototype原型对象添加的，所有的实例对象都能够继承调用。通过先定义一个引用变量，指向构造函数定义的新对象，数对象中的属性 prototype可以想成一个指针，指向一个方法。

参考文章

javascript——原型与原型链
详谈JavaScript原型链
继承与原型链
JS中new运算符的实现原理
js判断数据类型的四种方法
JS中的实例方法与静态方法
在js中动态方法与静态方法的区别