JavaScript之函数原型链完整版
我的上一篇文章有解释绅士原型及简单的原型链,在这里我将对原型链做完整讲述;
// 函数的原型链: 把函数当对象(实例对象)来看 function Person(){} // 底层Function创建出来的Person, 底层中任意函数都是Function创建的 // var Person = new Function(); // 把Person 当孩子来看,Person对象的原型链长啥样 // Person ==> Function.prototype ==> Object.prototype ==> null; // console.log( Person.__proto__ == Function.prototype ); // console.log( Function.prototype.__proto__ ); // Person.prototype 这个prototype属性是函数Person自带的 // Function.prototype 是唯一的原型对象的类型是个函数的 // Function.prototype 原型对象有call apply bind三个方法 console.dir( Function.prototype ); // 函数都可以去使用call apply bind方法, 是的
完整版原型链:
核心的点: 函数的双重身份
1. 函数当函数用
2. 函数也是对象
// 1. 把Person函数当函数用,具体当构造函数用 function Person(){} var p = new Person(); // 绘制以上代码的原型三角关系 // 构造函数: Person // 原型对象: Person.prototype // 实例对象: p // console.log( Person.prototype.__proto__ === Object.prototype ); // 2. 把Person函数当对象看,当实例对象看(孩子) // Person这个孩子谁创建的? // 底层 var Person = new Function(); // 绘制以上代码的原型三角关系 // 构造函数: Function // 原型对象: Function.prototype // 实例对象: Person // 3. 把Object考虑进来,把Object当构造函数来看 var obj = new Object(); // 绘制以上代码的原型三角关系 // 构造函数: Object // 原型对象: Object.prototype // 实例对象: obj // 4. 把Object当实例对象来看,孩子看,Object孩子谁生的 // 底层 var Object = new Function(); // 绘制以上代码的原型三角关系 // 构造函数: Function // 原型对象: Function.prototype // 实例对象: Object // console.log( Object.__proto__ === Function.prototype ); // 5. Function 函数是谁生下来的,是Function自己 // var Function = new Function(); // 绘制以上代码的原型三角关系 // 构造函数: Function // 原型对象: Function.prototype // 实例对象: Function console.log( Function.__proto__ == Function.prototype );
小结:
1. 函数是函数,也是对象
是函数有prototype属性
是对象有__proto__属性
所以函数有prototype也有__proto__属性
2. 任何函数的原型链都有 Function.prototype
3. 任何对象的原型链上都有 Object.prototype
4. 函数是一等公民(特权)
typeof 函数 ==> function
Function 生自己
Function.prototype 原型对象的类型是唯一的函数类型
案例:
console.log( Function.prototype === Function.prototype ); // true console.log(Object.__proto__ === Function.prototype); // true console.log( Function.prototype.__proto__ === Object.prototype ); // true console.log( Object.prototype.__proto__ === Object.prototype ); // false console.log( Object.__proto__.__proto__ === Object.prototype ); // true // 面试题 // Function的prototype原型对象有没有在Function对象的原型链上 /*console.log(Function instanceof Function); // true console.log(Function instanceof Object); // true console.log(Object instanceof Function); // true console.log(Object instanceof Object); // true*/ // 练习 function Person() {} var p = new Person() console.log(p.constructor); // Person console.log(Person.constructor); // Function

浙公网安备 33010602011771号