JavaScript:本型和本型链_javascript和java语言的区别_奇闻趣事网

JavaScript:本型和本型链_javascript和java语言的区别

奇闻趣事 2023-05-04 12:30www.bnfh.cn奇闻趣事

JavaScript原型和原型链

#大有学问#

前端小白Earl笔记——原型和原型链

概念

JavaScript 中所有的对象都有一个内置属性,称为它的 prototype(原型)。它本身是一个对象,故原型对象也会有它自己的原型,逐渐构成了原型链。原型链终止于拥有 null 作为其原型的对象上。
备注
指向对象原型的属性并不是 prototype。它的名字不是标准的,但实际上所有浏览器都使用 __proto__。访问对象原型的标准方法是Object.getPrototypeOf()。
——MDN

显式原型和隐式原型

由于实例对象中指向对象原型[[prototype]]的属性并不是 prototype,而是__proto__;函数对象又有一个名为prototype的属性。这对初学者很不友好,经常会产生混淆。那么__proto__和prototype又是什么关系呢?

从上图示例中可以看到,per.__proto__ ===Person.prototype的输出为true,这说明它俩的值是一样的,指向同一个地址。

显式原型prototype,每一个函数在创建之后都会拥有一个名为prototype的属性。

隐式原型__proto__,JavaScript中所有对象都有一个内置属性[[prototype]],大多浏览器都支持通过__proto__来访问,虽然__proto__不是标准的。访问这个内置属性标准方法是Object.getPrototypeOf()。隐式原型指向创建这个对象的函数(constructor)的prototype。

对象的隐式原型(__proto__)是其对应构造函数的显式原型(prototype)的值 。 显式原型和隐式原型指向同一个对象,是对象的两个引用。

原型的关系图

原型链

这时候我们再去回头看原型和原型链的概念就差不多可以理解了对象都会有一个可以通过__proto__访问的属性, 指向它的原型对象[[prototype]],而这个原型对象本身也是一个对象,也会有它自己的__proto__,就逐渐构成了原型链,原型链的末端是Object.prototype,因为Object.prototype的原型是null。

原型链的关系图

再看两个例子

//例1
var obj = ne Object({name: 'earl'})
obj.__proto__ === Object.prototype              //true
Object.prototype.__proto__ === null             //true

//例2
var arr = ne Array([1,2,3])
arr.__proto__ === Array.prototype               //true
Array.prototype.__proto__ === Object.prototype  //true
Object.prototype.__proto__ === null             //true

例1的原型链是obj ----> Object.prototype ----> null

例2的原型链是arr ----> Array.prototype ----> Object.prototype ----> null

Copyright © 2016-2025 www.bnfh.cn 怪异网 版权所有 Power by