一 原理

子类的构造函数的原型对象,是父类的构造函数创建的实例。

function Fruit(){
this.name = '水果';
this.nutrition=['维生素','膳食纤维'];
} Fruit.prototype.eat = function(){
console.log('eat');
}; function Mango(){ } // 继承父类的方法
Mango.prototype = new Fruit();
// 修改父类的构造函数的原型对象的constructor属性:
// 父类的实例会继承原型对象的constructor属性,从而父类的实例的constructor属性都指向父类的构造函数。仅此而已。
Mango.prototype.constructor = Mango;
// 添加子类的方法
Mango.prototype.taste = function(){
console.log('taste');
}; let mango1 = new Mango();
let mango2 = new Mango(); // 子类的实例共享原型对象中的属性/方法
console.log(mango1.name,mango2.name); // 水果 水果
console.log(mango1.nutrition === mango2.nutrition); // true
console.log(mango1.eat === mango2.eat) // true // 原型对象中的属性是基础数据类型:不能被子类直接修改
mango1.name = '泰国芒果';
mango2.name = '海南芒果';
console.log(mango1.__proto__.name,mango2.__proto__.name); // 水果 水果
console.log(mango1.name,mango2.name); // 泰国芒果 海南芒果 // 原型对象中的属性是对象类型:可以被子类直接修改。
mango1.nutrition.push('柠檬酸');
console.log(mango2.nutrition); // ["维生素", "膳食纤维", "柠檬酸"] // 原型链
console.log(mango1 instanceof Mango); // true
console.log(mango1 instanceof Fruit); // true

二 优点

拼接了原型链。子类的实例可以从父类继承属性/方法,子类的实例是父类的实例。

三 缺点

1 子类的构造函数无法向父类的构造函数传参。定义子类的构造函数时,继承就确定了,跟子类的构造函数的执行无关。

2 子类的实例共享原型对象的属性/方法,互相干扰。

3 不能实现多继承。 原型对象只能有一个。

JavaScript各种继承方式(一):原型链继承(prototype chaining)的更多相关文章

  1. js继承之组合继承(结合原型链继承 和 借用构造函数继承)

    在我的前两篇文章中,我们已经介绍了 js 中实现继承的两种模式:原型链继承和借用构造函数继承.这两种模式都存在各自的缺点,所以,我们考虑是否能将这二者结合到一起,从而发挥二者之长.即在继承过程中,既可 ...

  2. JS高阶---继承模式(原型链继承)

    [前言] 之前已经介绍了对象创建的五种模式,下面看下继承模式 本节介绍下<原型链继承> [主体] 验证如下: 关键点: .

  3. 【前端知识体系-JS相关】深入理解JavaScript原型(继承)和原型链

    1. Javascript继承 1.1 原型链继承 function Parent() { this.name = 'zhangsan'; this.children = ['A', 'B', 'C' ...

  4. javascript原型与原型链,prototype、__proto__、constructor

    javascript通过构造函数(constructor)和原型链来(prototype chain)实现其他面向对象语言的类概念.ES6语法中引入了“类”(class)的概念,但只是一个语法糖,只是 ...

  5. 深入浅出JavaScript之原型链&继承

    Javascript语言的继承机制,它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instanc ...

  6. 一步步学习javascript基础篇(5):面向对象设计之对象继承(原型链继承)

    上一篇介绍了对象创建的几种基本方式,今天我们看分析下对象的继承. 一.原型链继承 1.通过设置prototype指向“父类”的实例来实现继承. function Obj1() { this.name1 ...

  7. javascript中继承(一)-----原型链继承的个人理解

    [寒暄]好久没有更新博客了,说来话长,因为我下定决心要从一个后台程序员转为Front End,其间走过了一段漫长而艰辛的时光,今天跟大家分享下自己对javascript中原型链继承的理解. 总的说来, ...

  8. 《JAVASCRIPT高级程序设计》根植于原型链的继承

    继承是面向对象的语言中,一个最为津津乐道并乐此不疲的话题之一.JAVASCRIPT中的继承,主要是依靠原型链来实现的.上一篇文章介绍过,JAVASCRIPT中,每一个对象都有一个prototype属性 ...

  9. Javascript 组合继承 原型链继承 寄生继承

    Javascript继承通常有三种方式. 第一种:组合式继承: function SuperType(name) { this.name = name; this.colors = ["re ...

  10. 三张图搞懂JavaScript的原型对象与原型链 / js继承,各种继承的优缺点(原型链继承,组合继承,寄生组合继承)

    摘自:https://www.cnblogs.com/shuiyi/p/5305435.html 对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与__pro ...

随机推荐

  1. web API的概念

    11月20日 纷乱的术语 接口:从接口测试说起,接口是某个对象和外界交互的部分,应用程序可能有很多接口. 用户界面UI(user interface) 消息交互接口,外界是其他程序:diameter, ...

  2. react-native android打包

    看了官网测试的是可以的,自己整理下,方便后面查看 先是生产安卓证书,安卓证书生成,点这里.这里掠过 生成安卓证书,记住2个密码 秘钥库口令 和 私钥密码 1.然后把你生成的安卓证书放到文件放到你工程中 ...

  3. static,final的用法

    static的用法:修鉓符,修鉓属性,方法,代码块a1.修鉓属性:该属性是一个静态的属性,叫类的成员(没有static修鉓的属性叫实例的成员,调用时用:对象名.属性),调用:类名.属性.a2.修鉓方法 ...

  4. 尚硅谷redis学习3-redis启动以后的杂项

    redis速度很快,运行benchmark可以看出,各项运行速度可达100000次每秒 redis默认有16个数据库,分别是0, 1 ... 15,默认在0号库,可以通过select num转到其它库 ...

  5. IE 11中 onpropertychange失效

    https://msdn.microsoft.com/zh-cn/library/ie/dn265032(v=vs.85).aspx 将突变事件和属性更改事件迁移到突变观察者 Internet Exp ...

  6. 吴裕雄 30-MySQL 及 SQL 注入

    如果您通过网页获取用户输入的数据并将其插入一个MySQL数据库,那么就有可能发生SQL注入安全的问题.本章节将为大家介绍如何防止SQL注入,并通过脚本来过滤SQL中注入的字符.所谓SQL注入,就是通过 ...

  7. hadoop-2.7.3完全分布式部署

    一.环境介绍      IP       host JDK linux版本 hadop版本 192.168.0.1 master 1.8.0_111 centos7.2.1511 hadoop-2.7 ...

  8. centos 下安装redis

    一.安装redis 第一步:下载redis安装包 redis下载地址 wget http://download.redis.io/releases/redis-5.0.3.tar.gz 第二步:解压压 ...

  9. XML 可扩展标记语言

    因 为XML实在是太重要了,而且被广泛应用!不论是数据存储,还是其他方面,如配置文件等.XML是一种对独立于任何编程语言的数据进行编码的机制.在数据 交换领域,正在变得非常流行!因为他的基于节点的存储 ...

  10. TensorFlow 语法

    dataset = tf.data.TextLineDataset(file_path) 生成一个dataset,dataset中的每一个元素就对应了文件中的一行