简单实例
// 定义一个函数
function Foo(name) {
this.name = name
}
// 调用函数 这个函数返回 undefined
var foo = Foo('Tom')
console.log(foo); // undefined
// 调用构造方法
console.log(Foo); // [Function: Foo]
console.log(Foo.__proto__); // [Function]
console.log(Foo.constructor); // [Function: Function]
console.log(Foo.prototype); // Foo {}
console.log(Foo.prototype.__proto__); // {}
console.log(Foo.prototype.constructor); // [Function: Foo]
console.log(Foo.prototype.constructor === Foo); // true
// 相当于 Foo.prototype.constructor('Tom') 返回this
foo = new Foo('Tom')
console.log(foo); // Foo { name: 'Tom' }
console.log(foo.__proto__); // Foo {}
console.log(foo.prototype); // undefined
console.log(foo.constructor); // [Function: Foo]
var foo1 = new Foo.prototype.constructor('Tom')
console.log(foo1); // Foo { name: 'Tom' }
var foo2 = new Foo('Tom')
console.log(foo2); // Foo { name: 'Tom' }
console.log(foo1 == foo2); // false
console.log(foo1.__proto__); // Foo {}
console.log(foo1.prototype); // undefined
console.log(foo1.constructor); // [Function: Foo]
console.log(foo2.__proto__); // Foo {}
console.log(foo2.prototype); // undefined
console.log(foo2.constructor); // [Function: Foo]
总结
| 属性 | 归属 | 作用 | 指向 | 顶端 |
|---|---|---|---|---|
__proto__ | 对象所独有 | 对象属性的查找路径 | 对象->对象 | 原型链顶端null |
| constructor | 对象所独有 | 构造函数 | 对象->函数 | Function |
| prototype | 函数所独有 | 所有实例共享的属性和方法 | 函数->对象 | - |
图片来源和文章参考
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
