JS中的prototype、__proto__与constructor

简介: JS中的prototype、__proto__与constructor

13.png

简单实例

// 定义一个函数
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(图解)

            </div>
目录
相关文章
|
6月前
|
JavaScript
JS原型对象prototype
JS原型对象prototype
|
JavaScript
JS中的prototype、__proto__与constructor
JS中的prototype、__proto__与constructor
65 0
JS中的prototype、__proto__与constructor
|
JavaScript 前端开发
彻底深刻理解js原型链之prototype,__proto__以及constructor(二)
这篇教程主要目的对原型链概念进一步加深理解
彻底深刻理解js原型链之prototype,__proto__以及constructor(二)
|
JavaScript 前端开发
彻底深刻理解js原型链之prototype,__proto__以及constructor(一)
以下概念请花费一定的时间彻底理解,才能进行下一步,思考题一定要思考,这样才能彻底掌握原型链的知识点,教程中如果有任何的错误不足请指正!
24217 0
彻底深刻理解js原型链之prototype,__proto__以及constructor(一)
|
算法 JavaScript
第197天:js---caller、callee、constructor和prototype用法
一、caller---返回函数调用者 1 //返回函数调用者 2 //caller的应用场景 主要用于察看函数本身被哪个函数调用 3 function fn() { 4 //判断某函数是否被调用 5 if (fn.
1341 0
|
JavaScript 前端开发 设计模式
|
Web App开发 JavaScript iOS开发