最近都在巩固JS的基础知识,今天组要看的是有关继承方面的,每次看都会加深自己的理解呢

1.借助构造函数实现继承

原理:在子类中改变父类this的指向

 function Parent1() {
this.name = 'parent1';
}
function Child1() {
Parent1.call(this); //也可以使用 apply,改变函数运行的上下文;将父级的构造函数的this指向子类的实例
this.type = 'child1';
}
console.log(new Child1());

在控制台打印的信息可以看出,Child1的实例继承了Parent1的name属性

缺点:不能继承父类原型对象上的方法或属性

在原有代码的基础上做如下修改:

 function Parent1() {
this.name = 'parent1';
} Parent1.prototype.say = function () {
console.log('hi');
};
Parent1.prototype.color='red'; function Child1() {
Parent1.call(this);
this.type = 'child1';
}
var s=new Child1();

在控制台进行查看,可以看到s并没有继承color属性和say()方法

2.借助原型链实现继承

function Parent2() {
this.name = 'parent2';
} function Child2() {
this.type = 'child1';
}
/**
*原型链继承原理:s1是Child2的实例对象,它的__ptoro__属性指向Child2的原型对象,
*即Child2.prototype;代码中Child2.prototype=new Parent2(),等于Parent2的实例对
*象,因此可以继承Parent2
*/
Child2.prototype=new Parent2(); //重点
var s1 = new Child2();

缺点:原型链上的对象共享;如果父类Parent2中包含引用类型的属性,不同子类上的该属性是共享的,改变任意一个的值都会影响其他。

function Parent2() {
this.name = 'parent2';
this.play = [1, 2, 3];
} function Child2() {
this.type = 'child2';
} Child2.prototype = new Parent2(); //重点 var s1 = new Child2();
var s2 = new Child2();
console.log(s1.play, s2.play);
s1.play.push(4);
console.log(s1.play, s2.play);

虽然只改变了s1的play属性,但s2的也被改变了

3.组合继承方式;构造函数+原型链相结合

function Parent3() {
this.name = 'parent3';
this.play = [1, 2, 3];
} function Child3() {
Parent3.call(this);
this.type = 'child3';
} Child3.prototype = new Parent3(); var s3 = new Child3();
var s4 = new Child3();
s3.play.push(4);
console.log(s3.play, s4.play);
//注意:s3.constructor是Parent3

组合方式虽然解决了共享的问题,即s3的play值得改变不会影响s4的play值;但是这种方式会使父级的构造函数执行两次,因此可以进行优化。

3-1.组合继承方式的优化1

function Parent4() {
this.name = 'parent4';
this.play = [1, 2, 3];
} function Child4() {
Parent4.call(this);
this.type = 'child4';
}
Child4.prototype = Parent4.prototype; var s5 = new Child4();
var s6 = new Child4();
s5.play.push(4);
console.log(s5, s6);

不足:无法识别实例是由子类直接实例化还是由父类直接实例化的;s5的constructor是Parent4;因为Child4.prototype = Parent4.prototype;

3.2 组合继承的完美写法

function Parent5() {
this.name = 'parent5';
this.play = [1, 2, 3];
} function Child5() {
Parent5.call(this);
this.type = 'child5';
}
//Object.create创建一个中间对象,原型对象是父类的原型对象
Child5.prototype = Object.create(Parent5.prototype);
Child5.prototype.constructor = Child5 var s7 = new Child5();
var s8 = new Child5();
console.log(s7, s8);

关于JS的继承总结的更多相关文章

  1. JS对象继承篇

    JS对象继承篇 ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的 原型链 其基本思路是利用原型让一个引用类型继承另一个引用类型的属性和方法 function Person() ...

  2. js实现继承的5种方式 (笔记)

    js实现继承的5种方式 以下 均为 ES5 的写法: js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承 ...

  3. js实现继承的方式总结

    js实现继承的5种方式 以下 均为 ES5 的写法: js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承 ...

  4. 【09-23】js原型继承学习笔记

    js原型继承学习笔记 function funcA(){ this.a="prototype a"; } var b=new funcA(); b.a="object a ...

  5. js实现继承的两种方式

    这是面试时面试官会经常问到问题: js的继承方式大致可分为两种:对象冒充和原型方式: 一.先说对象冒充,又可分为3种:临时属性方式.call().apply(): 1.临时属性方式: 当构造对象son ...

  6. js实现继承

    js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式1.使用对象冒充实现继承(该种实现 ...

  7. 浅谈JS的继承

    JS继承 继承是OO语言中最为人津津乐道的概念,许多OO语言都支持两种方式的继承:接口继承:实现继承. 接口继承:只继承方法签名. 实现继承:继承实际的方法. 由于ES里函数没有签名,所以在ES里面无 ...

  8. JS类继承常用方式发展史

    JS类继承常用方式发展史 涉及知识点 构造函数方式继承 1-继承单个对象 1.1 多步走初始版 1.2 多步走优化版 1.3 Object.create()方式 2-继承多个对象 2.1 遍历 Obj ...

  9. js实现继承的5种方式

    js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式1.使用对象冒充实现继承(该种实现 ...

  10. JS原型继承与类的继承

    我们先看JS类的继承 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

随机推荐

  1. 新手安装 hadoop、hive和hbase 笔记

    系统是ubuntu 12.04 , hadoop版本是1.2.1 , hive版本是0.12 , hbase版本我忘记了,不好意思首先是配置好hostnamevi /etc/hosts写入你要配置的i ...

  2. 初识DetNet:确定性网络的前世今生

    在刚刚落幕的2019中国 SDN/NFV/AI大会上,确定性网络(Deterministic Networking)成为了大家讨论的热点话题之一.随着工业物联网(IIoT)的兴起和工业4.0的提出,T ...

  3. (转)java 线程同步

    转自 http://blog.csdn.net/column/details/java-thread.html http://leo-faith.iteye.com/blog/177779 http: ...

  4. python selenium模块调用浏览器的时候出错

    python selenium模块使用出错,这个怎么改 因为不同版本更新不同步问题,浏览器都要另外下一个驱动.

  5. bootstrapValidator 常用的验证

    $("#表单ID").bootstrapValidator({ message: 'This value is not valid', excluded: [':disabled' ...

  6. AKOJ-1265-输出二叉树

    链接:https://oj.ahstu.cc/JudgeOnline/problem.php?id=1265 题意: 我们知道二叉树的先序序列和中序序列或者是中序和后序能够唯一确定一颗二叉树.现在给一 ...

  7. Incorrect configuration: namenode address dfs.namenode.servicerpc-address or dfs.namenode.rpc-address is not configured.

    在搭建Hadoop集群的时候,遇到了这样的一个报错. 就在启动HDFS调用命令: start-dfs.sh 的时候,报错: 然后输密码就一直很奇怪,反正一直运行不成功. 百度了半天,确定是core-s ...

  8. sourceTree免注册免登陆使用方法-Windows

    安装sourceTree需要注册Google账号,而现在国内注册账号需要FQ,超级麻烦,所以还是免注册的号. 处理方法: 解决办法 在目录C:\Users\{youruser}\AppData\Loc ...

  9. [转]POI : How to Create and Use User Defined Functions

    本文转自:http://poi.apache.org/spreadsheet/user-defined-functions.html How to Create and Use User Define ...

  10. LVDT

    什么是 LVDT? LVDT 是线性可变差动变压器的缩写. 它是一种常见类型的机电传感器,可将其以机械方式耦合的物体的直线运动转换为对应的电气信号.LVDT 线性位移传感器随时可用,可以测量各种移动, ...