Javascript原型链梳理

Posted lynnyandy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript原型链梳理相关的知识,希望对你有一定的参考价值。

先来个简单的代码:

function Info(name, age){
this.name = name;
this.age = age;
this.message = function () {
console.log(this.name + "is" + this.age + "year‘s old");
}
}
var lynn = new Info("Lynn", 20);

构造函数的首字母一般大写,用来区分于普通函数,使用 new 调用,没有返回值,得到的对象成为该函数的一个实例
构造函数的prototype属性,称为原型属性,是一个隐藏属性,指向一个是object类型,称为原型对象
 构造函数原型对象的 constructor 属性 始终指向构造函数本身。
 fn.prototype.constructor === fn;

  • 对于所有的对象,都有proto属性,这个属性对应该对象的原型
  • 对于函数对象,除了proto属性之外,还有prototype属性,当一个函数被用作构造函数来创建实例时,该函数的prototype属性值将被作为原型赋值给所有对象实例(也就是设置实例的proto属性)

  当一个函数被用作构造函数来创建实例时,该函数的prototype属性值将被作为原型赋值给所有对象实例(也就是设置实例的proto属性),也就是说,所有实例的原型引用的是函数的prototype属性。
  lynn.proto ===Info.prototype

  在构造函数的原型上面附加的属性或者方法, 可以被其所有的实例共用.

  当代码获取某个对象的属性时,首先会在对象实例本身内查找,如果查找不到,就会向上搜索其原型对象。为实例添加一个属性时,这个属性会屏蔽原型对象中的    同名属性。若想访问原型对象中的属性值,需要使用delete将这个同名属性在实例中彻底删除。(注意:使用delete删除构造函数中的属性将把实例的原型对象中的属性也删除即如果把name放在Person()中,使用delete,person2的name将不存在)


function Info() {};
Person.prototype.name = ‘Lily‘;
Person.prototype.age = 18;
var info1 = new Info();
var info2 = new Info();
info2.name = "Tom";
console.log(info1.name);// Lily
console.log(info2.name); // Tom
delete.info2.name;
console.log(info2.name); // Lily

一个属性能够访问时(无论是在实例还是原型对象中)in操作符都会返回true,所以当in操作符返回true。hasOwnProperty("属性名")可以检测一个属性是存在于实例还是原型对象中,其返回值true代表存在于实例中,false代表存在于原型对象中。

原型对象本身同样拥有一个内部属性 [[prototype]], 指向当前构造函数的构造函数的原型对象.这种由原型对象构建而成的链表, 就是原型链.原型链存在的意义, 在于尽可能的共用方法和属性. 或者其他更多的我不知道的意义.

javascript语言中,所有对象的原型链根节点都是Object.prototype。Object.prototype值是无法修改,它提供了一些默认的方法。且它的proto等于null!

instanceof是一个二元运算符,如:A instanceof B. 其中,A必须是一个合法的JavaScript对象,B必须是一个合法的JavaScript函数 (function). 判断过程如下:

如果函数B在对象A的原型链 (prototype chain) 中被发现,那么instanceof操作符将返回true,否则返回false.

所以导致了:

Function instanceof Object;     //true
Object instanceof Function;     //true
Function instanceof Function;   //true
Object instanceof Object;       //true

这样的情况发生!

以上是关于Javascript原型链梳理的主要内容,如果未能解决你的问题,请参考以下文章

一文梳理JavaScript中常见的七大继承方案

ES基础知识与高频考点梳理

前端面试知识点梳理之五——javascript面向对象

面向对象原型链继承知识梳理

对原型链相关的知识的梳理

JavaScript之粗浅原型和原型链