JavaScript原型和原型链（ prototype 与 __proto__ ）

1、函数对象

 

1. 全部引用类型（函数、数组、对象）都拥有__proto__属性（隐式原型）

2. 全部函数拥有 prototype 属性（显式原型）（仅限函数）

3. 原型对象：拥有 prototype 属性的对象，在定义函数时就被建立

 

关于 prototype 与__proto__

• js中全部的函数都有一个 prototype 属性，该属性引用了一个对象，即原型对象，也简称原型
• js对象有一个__proto__属性，指向它的构造函数的prototype属性
• 对象.__proto__===函数.prototype;

var a = new A;
//a 类型：对象
//A 类型：函数

var Object = new Function();
//var 对象 = new 函数;

Object.__proto__ === Function.prototype;
//对象.__proto__ === 函数.prototype;

Function.__proto__ === Function.prototype;
//由于 Function 也是 Object

 

2、构造函数

//建立构造函数
function demo(name){
    this.name= name;
}
demo.prototype = {
    alert(){
        alert(this.name);
    }
}
//建立实例
var a = new demo("ming");
a.print = function(){
    console.log(this.name);
    console.log(this);  //Person对象
}
a.print();  //控制台内容以下

a.alert();  //弹出ming

• print()方法是a实例自己具备的方法，因此 a.print() 打印 ming

　　   alert()不属于a实例的方法，属于构造函数的方法，a.alert() 也会打印 ming，由于实例继承构造函数的方法

• 实例a的隐式原型指向它构造函数的显式原型，指向的意思是恒等于

a.__proto__ === demo.prototype

• 当调用某种方法或查找某种属性时，首先会在自身调用和查找，若是自身并无该属性或方法，则会去它的__proto__属性中调用查找，也就是它构造函数的 prototype 中调用查找。

 

3、原型和原型链

Function.prototype.a = "a";
Object.prototype.b = "b";
function Person(){}
console.log(Person);    //function Person()
let p = new Person();
console.log(p);         //Person {} 对象
console.log(p.a);       //undefined
console.log(p.b);       //b

因为 p 是 Person() 的实例，是一个 Person 对象，它拥有一个属性值__proto__，而且__proto__是一个对象，包含两个属性值 constructor 和__proto__

console.log(p.__proto__.constructor);   //function Person(){}
console.log(p.__proto__.__proto__);     //对象{}，拥有不少属性值

p.__proto__.constructor 返回的结果为构造函数自己，p.__proto__.__proto__有不少参数 

console.log(p.__proto__.__proto__)

咱们调用 constructor 属性，

p.__proto__.__proto __.constructor 获得拥有多个参数的Object()函数，

Person.prototype 的隐式原型的 constructor 指向Object()，即 Person.prototype.__proto__.constructor == Object()

从 p.__proto__.constructor 返回的结果为构造函数自己获得 Person.prototype.constructor == Person()

因此 p.__proto__.__proto__== Object.prototype

即 p.b 打印结果为b，p没有b属性，会一直经过__proto__向上查找，最后当查找到 Object.prototype 时找到，最后打印出b，

向上查找过程当中，获得的是 Object.prototype，而不是 Function.prototype，找不到a属性，

因此结果为 undefined，这就是原型链，经过__proto__向上进行查找，最终到null结束

console.log(p.__proto__.__proto__.__proto__);   //null
console.log(Object.prototype.__proto__);        //null

同理，得出如下结果

//Function
function Function(){}
console.log(Function);  //Function()
console.log(Function.prototype.constructor);    //Function()
console.log(Function.prototype.__proto__);      //Object.prototype
console.log(Function.prototype.__proto__.__proto__);    //NULL
console.log(Function.prototype.__proto__.constructor);  //Object()
console.log(Function.prototype.__proto__ === Object.prototype); //true

 

4、总结

 

1. 凡是经过 new function() 建立的对象都是函数对象，其余的都是普通对象

2. js 中全部的函数对象都有一个 prototype 属性，这个属性引用了一个对象，

   即原型对象，也简称原型。普通对象没有 prototype，但有__proto__属性

3. js 在建立对象（不管是普通对象仍是函数对象）的时候，都有一个叫作

   __proto__的内置属性，用于指向建立它的函数对象的原型对象 prototype（即它

   的构造函数的原型对象）