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(图解)

相关文章
|
前端开发 JavaScript
【JavaScript原型链prototype详解】
在JavaScript中,每个对象都有一个原型(prototype)属性,它指向另一个对象。这个被指向的对象也有自己的原型,以此类推,最终形成了一个原型链。原型链的顶端是Object.prototype,它是所有对象的根原型。 当我们访问一个对象的属性时,如果该对象自身没有这个属性,JavaScript会沿着原型链向上查找,直到找到匹配的属性或者到达原型链的末端。
143 0
【JavaScript原型链prototype详解】
|
JavaScript 前端开发
CocosCreator 面试题(二)JavaScript中的prototype的理解
CocosCreator 面试题(二)JavaScript中的prototype的理解
231 0
|
2月前
|
JavaScript 前端开发
JavaScript - 测试 Prototype
JavaScript - 测试 Prototype
16 0
|
3月前
|
JavaScript 前端开发
JavaScript prototype(原型对象)
JavaScript prototype(原型对象)
36 0
|
3月前
|
JavaScript 前端开发
JavaScript基础知识-原型(prototype)
关于JavaScript基础知识中原型(prototype)概念的介绍。
42 1
|
7月前
|
JavaScript 前端开发
在JavaScript中,函数原型(Function Prototype)是一个特殊的对象
【5月更文挑战第11天】JavaScript中的函数原型是一个特殊对象,它为所有函数实例提供共享的方法和属性。每个函数在创建时都有一个`prototype`属性,指向原型对象。利用原型,我们可以向所有实例添加方法和属性,实现继承。例如,我们定义一个`Person`函数,向其原型添加`greet`方法,然后创建实例`john`和`jane`,它们都能调用这个方法。尽管可以直接在原型上添加方法,但推荐在构造函数内部定义以封装数据和逻辑。
66 2
|
7月前
|
JavaScript 前端开发 开发者
【专栏】JavaScript 中的 prototype 和__proto__是关乎对象继承和属性查找的关键概念
【4月更文挑战第29天】JavaScript 中的 prototype 和__proto__是关乎对象继承和属性查找的关键概念。prototype 是函数属性,用于实现对象继承,方法和属性定义在其上可被所有实例共享。__proto__是对象属性,实现属性查找机制,当对象自身找不到属性时,会沿原型链向上查找。两者关系:__proto__指向构造函数的 prototype,构成对象与原型的桥梁。虽然 prototype 可直接访问,但__proto__由引擎内部维护,不可见。理解两者区别有助于深入学习 JavaScript。
97 1
|
7月前
|
JavaScript
JS原型对象prototype
JS原型对象prototype
|
7月前
|
JavaScript 前端开发
JavaScript基础知识:什么是原型链(Prototype Chain)?
JavaScript基础知识:什么是原型链(Prototype Chain)?
56 2
|
7月前
|
JavaScript 前端开发 Java
JavaScript难点:原型、原型链、继承、new、prototype和constructor
JavaScript 不像 Java、C++ 这种纯面向对象的语言,可以通过类实现继承,JavaScript中的继承是通过原型实现的,即使 ES6 中新增的 class 类也只是原型的语法糖而已
84 4