JS原型链

历史来源:

Brendan Eric负责开发——>正值面向对象编程最为兴盛的时期,故而收到影响,Javascript里面所有的数据类型都是对象——>JS它必须要设计成一种简易的脚本语言,所以Brendan Eric没有引入“类”,JS并不需要成为一种完整的面向对象编程语言,那与它的设计初衷相悖——>那么如何将这些对象联系起来呢?Brendan Eric设计了“继承”机制。

new运算符:

在C++和Java中,都是用new来实现,所以在JS这里new也被设计到继承中去。
Brendan Eric做了一个类似于面向对象语言的“继承”,在new的后面是构造函数。

function People(name){
    this.name = name ;
}
let Bob = new People('Bob');
    console.log(Bob.name) ;

但是问题也随之而来,当我们还需要Lily,Tom,David……的时候,我们无法共享属性与方法。将这些个对象new出来后,他们的属性和方法之间相互独立,就像平行线一样。
这样数据无法共享,造成资源浪费。

prototype属性

为了解决上述问题,引入了prototype属性。该属性包含一个对象,所有需要共享的属性和方法都放在这个对象里面;那些不需要共享的属性和方法就放在构造函数里面。实例对象一旦创建,将自动引用prototype对象的属性和方法。所以,实例对象的属性和方法就分为两种,一种是本地的,另一种是引用的。

function People(name){
    this.name = name ;
}
People.prototype = { sex: '男'} ; 
let Bob = new People('Bob') ;
let David = new People('David') ;

console.log(Bob.sex);
console.log(David.sex);

prototype对象就好像是实例对象的原型,而实例对象就好像“继承”了prototype对象一样。

原型链

prototype原型对象又有自己的原型,直到某个对象的原型为null为止,也就是说至此没有原型指向。这种一级一级的链结构就称为原型链。就像我们的父辈->我们父辈的父辈->我们父辈的父辈的父辈…世界上第一个人->不是人的东西。

基于原型链的继承

  • 继承属性:
    JS对象有一个指向一个原型对象的链。当访问一个对象的属性时,不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,就这样层层向上搜索,直到找到一个名字匹配的属性或到达null。
    举个例子:
假如有一个对象A,它有属性{x:1,y:2}
A的原型B,有属性{z:3,w:4}
A的原型:A.prototype;
B的原型:B.prototype;
console.log(A.x);//1
console.log(A.z);//3
console.log(A.d);//undefined

创建一个对象它自己的属性的方法就是设置这个对象的属性。

  • 继承方法:
    JS并没有“方法”,任何函数都可以添加到对象上作为对象的属性。继承类似上面。
var a = {
    x:1,
    y:function(){
    return this.x+1;
  }
}
console.log(a.y());//2
var b = Object.create(a);
b.x=10;
console.log(b.y());//11

当继承的函数被调用时,this指向的是继承的对象,并不指向继承函数所在的原型对象。

如何生成原型链

使用构造器创建对象

function Cat(){
    this.children = [];
    this.food =[];
}
Cat.prototype = {
    addFood : function(f){
        this.food.push(f) ; 
    }
}
var c = new Cat();

使用Object.create创建对象。上面有例子。
使用class关键字。ES6

use "strict";
class Box{
    constructor(height,width){
        this.height = height ;
        this.width = width ; 
    }
}
class RedBox extends Box{\
    constructor(length){
        super(length,length);
    }
    …
}
var b = new RedBox(2);

JS原型链的性能

在原型链上面查找属性比较耗费时间,性能也不好,当我们查找一个根本不存在的属性的时候,会遍历整个原型链,原型链上的属性是可枚举的。
那我们如何检测某个属性到底是在自身还是原型链上?hasOwnProperty方法可以解决,这个方法继承自Object.prototype;是JS中唯一一个只涉及对象自身属性而不会遍历原型链的方法。
还发现一个特别有趣的讲解原型链的文章附上链接,诸位看官可到此一游。
简单粗暴的理解JS原型链

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,911评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,014评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 142,129评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,283评论 1 264
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,159评论 4 357
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,161评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,565评论 3 382
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,251评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,531评论 1 292
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,619评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,383评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,255评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,624评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,916评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,199评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,553评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,756评论 2 335

推荐阅读更多精彩内容