美文网首页
JS 原型从入门到实践

JS 原型从入门到实践

作者: ER_PM | 来源:发表于2019-05-03 17:52 被阅读0次

很多看起来简单的事情,坚持做到极致就有非凡的力量。

我们可以在原型对象上增加特定属性,原型是定义属性和功能的一种便捷方式,对象可以访问原型上的属性和功能。

JS中的原型,类似于面向对象语言中的类(class),原型的主要用途是使用一种类风格的面向对象继承的方式编码。

大纲

  • 原型的概念
  • 原型的作用
  • 原型链

原型的概念

原型的概念很简单,每个对象都含有原型的引用,当查找属性时,若对象本身不具有该属性,则会查找原型上是否有该属性。

你可以假想下,你正在和一组人玩一个游戏,游戏规则为:主持人问,如果你的脑子知道答案,则可直接回答;如果你不知道答案,则可以询问你的下一个小伙伴。

原型的作用

JS中,对象是属性名与属性值的集合。例如,简单的创建一个对象字面量:

let obj = {
  prop1:1,
  prop2:function(){},
  prop3:{}
}

在软件开发过程中,为了避免重复造轮子,我们希望能尽可能的复用代码,继承是复用代码的一种方式,在JS中,可通过原型实现继承,将一个对象属性扩展到另一个对象上。

对象通过原型访问其他对象的属性

//创建3个带有属性的对象。
const a = { swim: true };
const b = { run: true };
const c = { fly: true };

//a对象只能访问自身的属性swim。
console.assert("swim" in a, "a对象会游泳");
console.assert(!("run" in a), "a对象不会跑");
console.assert(!("fly" in a), "a对象不会游泳");

/*console.assert如果断言为false,则将一个错误消息写入控制台。如果断言是true,没有任何反应。*/

//Object.setPrototypeOf方法,将对象b设置为a对象的原型。
Object.setPrototypeOf(a, b);
console.assert("run" in a, "a对象现在会跑了");//通过将b对象设置为a对象的原型,现在a可以访问b对象的属性。
console.assert(!("fly" in b), "b对象不会飞");//目前b对象还不具有fly属性

Object.setPrototypeOf(b, c);//将c对象设置为b对象的原型
console.assert("fly" in b, "b对象现在会飞了");//现在b对象可以访问属性fly
console.assert("fly" in a, "a对象现在也会飞了");//现在a的原型是b,b的原型是c,所以a也拥有了c的属性。
//以上都为true

通过Object.setPrototypeOf(a, b)Object.setPrototypeOf(b, c)a继承了b的属性,b又继承了c的属性,所以a拥有了bc的属性。当访问a.fly时,首先查找对象a,然后在查找对象b ,最后查找对象c

原型链

每个对象都可以有一个原型,每个对象的原型也可以拥有一个原型,以此类推,形成一个原型链。查找特定属性将会被委托在整个原型链上,只有当没有更多的原型可以进行查找时,才会停止查找。

例如上面的例子,在a上查询属性fly的值时,首先在a上进行查找,在a上没有找到该属性,因此继续在a的原型即b上进行查找。在b上仍然没有属性fly,因此会继续在b的原型即c上进行查找,最终找到该属性的值。

文章字数虽少,但短小精悍,希望能有效帮助你理解原型的意义。

相关文章

网友评论

      本文标题:JS 原型从入门到实践

      本文链接:https://www.haomeiwen.com/subject/cgsanqtx.html