原型链prototype、proto、constructor

最新推荐文章于 2025-11-28 09:44:01 发布

原创最新推荐文章于 2025-11-28 09:44:01 发布 · 584 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#es6 #前端 #ecmascript

本文详细解析了JavaScript中prototype的作用于构造函数上的访问，以及__proto__用于原型查找父级的特性。通过实例展示了原型链和构造函数__proto__的遍历过程，并介绍了Array.prototype.slice的转换功能。

prototype是给构造函数访问原型的属性的，只能在构造函数上使用，不能在原型和实例上使用。

__proto__是给构造函数或者原型查找父亲的。


function Person(){}
var p = new Person()
console.log(p);

console.log('原型：',Person.prototype); // 构造函数.prototype => 原型
console.log('原型：',p.__proto__); // 实例.__proto__ => 原型
console.log('构造函数', Person.prototype.constructor); // 原型.constructor => 构造函数

// 实例无限__proto__ 向上爬原型对象
console.log(p.__proto__); // {constructor: ƒ}
console.log(p.__proto__.__proto__); // {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
console.log(p.__proto__.__proto__.__proto__); // null
console.log(p.__proto__.__proto__.constructor); // ƒ Object() { [native code] }
console.log(p.__proto__.__proto__.constructor === Object); // true

// 无限prototype =>prototypr只能在构造函数上使用，原型和实例上没有
console.log(Person.prototype);
// console.log(Person.prototype.prototype); // undefined


// 构造函数无限__proto__
console.log(Person.__proto__) // 祖宗函数 ƒ () { [native code] }
console.log(Person.__proto__ === Function.__proto__); // true
console.log(Person.__proto__.__proto__) // {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
console.log(Person.__proto__.__proto__.__proto__) // null

console.log(Function);
console.log(Function.__proto__); // ƒ () { [native code] }

console.log(Object.__proto__.constructor === Function);  // true
console.log(Person.prototype.__proto__.constructor);  // ƒ Object() { [native code] }
console.log(Object.__proto__.constructor);  // ƒ Function() { [native code] } 
console.log(Object.__proto__.constructor.__proto__);  // ƒ () { [native code] }

Array.prototype.slice.call(arguments)：将伪数组转变为真正的数组。