对原型链的理解


目录

原型链

  1. 原型对象

在 JavaScript 中,绝大多数的函数都有一个叫做 prototype 的属性,指向原型对象,
通过构造函数new出来的实例, 都可以共享访问原型对象的属性。

image

  1. 原型链

在JavaScript 中所有都是对象,每个对象都有一个 __proto__ 属性,这个属性指向了当前对象的构造函数的原型。对象可以通过自身的 __proto__属性访问构造函数的原型对象,原型对象也有 __proto__,访问原型的原型,向上查找,直到找到Object.prototype,因此这样就串联形成一个链式结构,也就是我们称为的原型链

  1. 属性的区分

通过 hasOwnProperty()函数来实现

let person = { 
  name: "Tom", 
  age: 18, 
  job: "student"
}

console.log(person.hasOwnProperty("name")) // true 
console.log(person.hasOwnProperty("hasOwnProperty")) // false 
console.log(Object.prototype.hasOwnProperty("hasOwnProperty")) // true

name属性为实例属性,在调用hasOwnProperty方法时,会返回truehasOwnProperty属性为原型对象上的属性,在调用hasOwnProperty函数时,会返回false.

在使用for...in运算符,遍历对象的属性时,一般可以配合hasOwnProperty方法一起使用,检测某个属性是否为对象自身的属性,如果是,可以做相应的处理。

for(var p in person){
    if(person.hasOwnProperty(p)){
        
    }
}
  1. 原型链特点

第一个特点:由于原型链的存在,属性查找的过程不再只是查找自身的原型对象,而是会沿着整个原型链一直向上,直到追溯到Object.prototype.也就是说,当js引擎在查找对象的属性时,先查找对象本身是否存在该属性,如果不存在,会在原型链上查找,直到Object.prototype.如果Object.prototype上也找不到该属性,则返回undefined,如果期间在对象本身找到了或者是某个原型对象上找到了该属性,则会返回对应的结果。

由于这个特点,我们在自定义的对象中,可以调用某些未在自定义构造函数中定义的函数,例如toString( )函数。

function Person(){ }
var p = new Person();
p.toString(); // 实际上调用的是Object.prototype.toString( )

第二个特点:由于属性查找会经历整个原型链,因此查找的链路越长,对性能的影响越大。

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/281606.html

(0)
上一篇 2022年8月22日
下一篇 2022年8月22日

相关推荐

发表回复

登录后才能评论