关于JS的继承总结
最近都在巩固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的继承总结的更多相关文章
- JS对象继承篇
JS对象继承篇 ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的 原型链 其基本思路是利用原型让一个引用类型继承另一个引用类型的属性和方法 function Person() ...
- js实现继承的5种方式 (笔记)
js实现继承的5种方式 以下 均为 ES5 的写法: js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承 ...
- js实现继承的方式总结
js实现继承的5种方式 以下 均为 ES5 的写法: js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承 ...
- 【09-23】js原型继承学习笔记
js原型继承学习笔记 function funcA(){ this.a="prototype a"; } var b=new funcA(); b.a="object a ...
- js实现继承的两种方式
这是面试时面试官会经常问到问题: js的继承方式大致可分为两种:对象冒充和原型方式: 一.先说对象冒充,又可分为3种:临时属性方式.call().apply(): 1.临时属性方式: 当构造对象son ...
- js实现继承
js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式1.使用对象冒充实现继承(该种实现 ...
- 浅谈JS的继承
JS继承 继承是OO语言中最为人津津乐道的概念,许多OO语言都支持两种方式的继承:接口继承:实现继承. 接口继承:只继承方法签名. 实现继承:继承实际的方法. 由于ES里函数没有签名,所以在ES里面无 ...
- JS类继承常用方式发展史
JS类继承常用方式发展史 涉及知识点 构造函数方式继承 1-继承单个对象 1.1 多步走初始版 1.2 多步走优化版 1.3 Object.create()方式 2-继承多个对象 2.1 遍历 Obj ...
- js实现继承的5种方式
js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式1.使用对象冒充实现继承(该种实现 ...
- JS原型继承与类的继承
我们先看JS类的继承 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
随机推荐
- 剑指OFFER之二叉树的镜像(九度OJ1521)
题目描述: 输入一个二叉树,输出其镜像. 输入: 输入可能包含多个测试样例,输入以EOF结束.对于每个测试案例,输入的第一行为一个整数n(0<=n<=1000,n代表将要输入的二叉树节点的 ...
- 【POJ - 3040】Allowance(贪心)
Allowance 原文是English,这里就放Chinese了 Descriptions: 作为创纪录的牛奶生产的奖励,农场主约翰决定开始给Bessie奶牛一个小的每周津贴.FJ有一套硬币N种(1 ...
- export default 和 export 的使用方式(六)
一:ES6 的导入模块方式和暴露对象方式: ES6 中导入模块使用:import 模块名称 from '模块标识符':import '表示路径': 在 ES6 中使用 export default 和 ...
- J - 吉哥系列故事――恨7不成妻
#include "cstdio" #include "math.h" #include "cstring" #define mod 100 ...
- 字符串匹配,KMP算法
KMP的详解见:https://segmentfault.com/a/1190000008575379 主要难点在于Next数组的理解,KMP是不需要回溯的匹配算法. #include<iost ...
- swift SqliteDB使用
操作步骤: 1,在 Build Phases -> Link Binary With Libraries 中点击加号,添加 libsqlite3.0.tbd 到项目中来 2,创建连接头文件B ...
- [题解](数学)BZOJ_1257_余数求和
来源:https://blog.csdn.net/loi_dqs/article/details/50522975 并不知道为什么是sqrt(n)的段数......书上写的看不懂...... 但是这个 ...
- mysql 巧用存储过程
根据距离排序 CREATE DEFINER=`ln` PROCEDURE `Proc_4`(IN `lon1` double,IN `lat1` double,IN `PageStart` int,I ...
- 084 Largest Rectangle in Histogram 柱状图中最大的矩形
给出 n 个非负整数来表示柱状图的各个柱子的高度,每个柱子紧挨彼此,且宽度为 1 .您的函数要能够求出该柱状图中,能勾勒出来的最大矩形的面积. 详见:https://leetcode.com/prob ...
- JS脚本不能执行
这段时间在做前端的动态页面,出了很多问题,因为js平时用的很少,所以花了不少无用功. 其中有两点一定要注意: 1.当js中有语法错误时,js脚本会无法执行. 2.当js脚本中有未定义的变量时,后边的语 ...