JavaScript拓展--ES5的继承详解

最新推荐文章于 2024-09-06 22:20:29 发布
最新推荐文章于 2024-09-06 22:20:29 发布
阅读量403 收藏
点赞数
分类专栏： web前端基础学习 JavaScript学习 文章标签： 前端 javascript es
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxn200125/article/details/121398928
版权

目录

原型链继承 

继承方法

优点

缺点

借用构造函数(经典继承)

继承方法

优点

缺点

组合继承

继承方法

优点     

缺点

原型式继承

继承方法

优点

缺点

寄生式继承

继承方法

优点

缺点

寄生组合式继承 

继承方法

优点

原型链继承 

        上一篇博客我们知道了原型和原型链，知道了构造函数在原型链中的地位，也知道了js对象可以从从原型继承属性和方法，而ES5中定义类是通过构造函数实现，所以ES5中其中一种继承方法就是以原型为基础的。

继承方法

        通过原型链思想，让父类实例对象作为子类原型对象，子类即可继承父类的属性和方法

//es5继承
function Parent(){ //父类构造函数
    this.name='张三';
} 
Parent.prototype={  //父类原型对象
    age:20,
    get:function(){
        console.log(this.name+"的年龄是"+this.age);
    }
}
function Child(){}  //子类构造函数
Child.prototype=new Parent();  //将父类的实例对象作为子类的原型对象
Child.prototype.constructor=Child;  //原型对象的constructor指向子类
var Ch1=new Child(); //创建子类实例对象
//用子类去调用父类的属性和方法
console.log(Ch1.name);  //张三
console.log(Ch1.age);   //20
Ch1.get();              //张三的年龄是20

        上例中，我们创建父类构造函数和父类原型对象，并为对象创建属性和方法。然后创建子类构造函数，将父类的实例对象作为子类的原型对象，创建子类实例对象后调用父类的属性和方法，成功输出父类的属性和方法，证明继承成功。

        那么，如果我们为子类增加属性和方法，子类是否会影响到父类呢？

//为子类增加新属性和新方法
Child.prototype.gender='男';
Child.prototype.gets=function(){
    console.log('性别：'+this.gender);
}
//子类成功输出
console.log(Ch1.gender);  //男
Ch1.gets();  //性别：男
//测试父类能否调用子类属性和方法--不能
var Pa1=new Parent();  //创建父类实例对象
console.log(Pa1.gender);  //undefined
Pa1.gets();   //Pa1.gets is not a function
//测试父类的原型能否调用子类属性和方法--不能
console.log(Parent.prototype.gender);  //undefined
Parent.prototype.gets(); //Parent.prototype.gets is not a function

        通过上述测试我们会发现，子类增加属性和方法不会影响到父类，而父类增加属性和方法，子类可以继承。

        所以我们可以做出利用原型对象继承父类方法的原型链示意图：

优点

        通过原型链继承，子类可以复用父类的公共函数，通过原型可以向构造函数内添加新属性和新方法

缺点

        但是原型链方式继承也存在一定的缺点：

        1.多个实例对引用类型的操作会被篡改，换种方法来讲就是当一个实例对引用类型属性进行修改，这种修改会被其他实例共享(不会影响到父类实例)

function Parent(){ //父类构造函数
    this.name=['张三'];
} 
function Child(){}  //子类构造函数

Child.prototype=new Parent();  //将父类的实例对象作为子类的原型对象
Child.prototype.constructor=Child;  //原型对象的constructor指向子类

var Ch1=new Child(); //创建子类实例对象1
Ch1.name.push("李四"); //利用array的内置函数push添加元素到数组的末尾
console.log(Ch1.name); //[ '张三', '李四' ]

//实例对象1对引用类型的修改影响到了其他实例对象
var ch2=new Child() //再创建一个子类实例对象2
console.log(ch2.name); //[ '张三', '李四' ]

//！子类实例变化不会影响到父类实例！
var Pa1=new Parent();  //创建父类实例对象
console.log(Pa1.name); //[ '张三' ]

        2.创建子类实例的时候，无法向父类构造函数进行传参。

借用构造函数(经典继承)

         在之前写过的函数详解博客中，有写过更改this指向，其中就包含apply()和call()两种方法。借用构造函数继承的方法就用到这两种方式。

继承方法

        在子类构造函数的内部调用父类构造函数，通过使用apply()和call()方法，就可以在新创建的对象上执行构造函数。

function Parent(){
    this.name=['张三'];
}
function Child(){
    Parent.call(this);       //call()方法
    // Parent.apply(this);   //apply()方法
}

var ch1=new Child();    //创建子类实例对象1
ch1.name.push('李四');   //利用array的内置函数push添加元素到数组的末尾
console.log(ch1.name);  //[ '张三', '李四' ]

var ch2=new Child();    创建子类实例对象2
console.log(ch2.name);  //[ '张三']

        通过上述测试我们可以发现，利用借用构造函数方法不仅可以做到继承，而且还解决了原型链继承中，子类实例修改引用类型属性被其他实例共享的问题。因为通过apply()和call()两种方法，实际上是在新创建的子类实例环境下调用父类构造函数，故子类每个实例会将父类中的属性复制一份。不仅如此，该继承方法还可以解决原型链第二个缺点子类无法向父类传参的问题：

//传参
function Parent(name){
    this.name=name;
}
function Child(name){
    Parent.call(this,name);       //call()方法
    // Parent.apply(this,[name]);   //apply()方法
}

var ch1=new Child('李四');    //创建子类实例对象1,进行传参
console.log(ch1.name);  //李四

var ch2=new Child('王五');    创建子类实例对象2,进行传参
console.log(ch2.name);  //王五

        所以，综上所述，借用构造函数继承方法有两个优点，分别解决了原型链继承的两个缺点，但这种继承方式也有缺点：

优点

        1.解决了当子类实例修改引用类型属性被其他子类实例共享的问题

        2.子类可以向父类进行传参 

缺点

        1.不能复用父类的公共函数

//父类原型定义属性
Parent.prototype={
    age:20
}

var ch1=new Child('李四');    //创建子类实例对象1,进行传参
console.log(ch1.name);  //李四
console.log(ch1.age);   //undefined  不能复用

        2.每个子类都有父类实例函数的副本，影响性能

组合继承

        组合继承实质上是将原型链和借用构造函数结合在一起。

继承方法

        用原型链实现对原型属性和方法的继承，用借用构造函数计数实现对实例属性的继承。

//组合继承
function Parent(name){   //父类构造函数
    this.name=name;
    this.fruit=['apple','banana'];
}
Parent.prototype={       //父类原形函数
    set:function(){
        console.log(this.name+"喜欢的水果有"+this.fruit[2])
    }
}

//构造函数
function Child(name,age){  //子类构造函数
    //第二次调用Parent 继承属性 
    Parent.call(this,name);
    this.age=age;
}

//构建原型链
//第一次调用Parent 继承原型方法
Child.prototype=new Parent(); //将父类的实例对象作为子类的原型对象
Child.prototype.constructor=Child(); //原型对象的constructor指向子类构造函数

var ch1=new Child('张三','20');  //实例对象1
ch1.fruit.push('pear');  //利用array的内置函数push添加元素到数组的末尾
console.log(ch1.name,ch1.age); //张三 20
console.log(ch1.fruit); //[ 'apple', 'banana', 'pear' ]
ch1.set();  //张三喜欢的水果有pear

var ch2=new Child('李四','22');  //实例对象2
ch2.fruit.push('lemon');  //利用array的内置函数push添加元素到数组的末尾
console.log(ch2.name,ch2.age); //李四 22
console.log(ch2.fruit); //[ 'apple', 'banana', 'lemon' ]
ch2.set();  //李四喜欢的水果有lemon

        通过上述测试我们可以发现，组合继承结合了原型继承和构造函数方式继承的优点，在原型上定义方法实现函数复用，又能保证每个实例拥有自己的属性。 

优点     

        1.可以做到父类方法复用

        2.解决了当子类实例修改引用类型属性被其他子类实例共享的问题

        3.子类可以向父类进行传参

缺点

        无论在什么情况下，都需要执行两次父类构造函数，第一次是创建子类原型时：Child.prototype=new Parent()，第二次在子类构造函数内部：Parent.call(this,name)，造成了不必要的浪费

原型式继承

        要严格区分原型式继承与原型链继承

继承方法

        借助原型根据已有的对象创建新对象(复制传入的对象到创建对象的原型上)

function fun(obj){       //创建构造函数fun
    function Child(){};  //创建空构造函数Child
    Child.prototype=obj; //Child原型对象设置为参数
    return new Child();  //Child实例化后返回
}

        首先创造一个函数fun，内部定义一个构造函数Child，将child原型对象设置为参数，之后将参数设置为一个对象，完成继承，然后将Child实例化后返回，则返回的就是一个实例化对象

var Parent={
    name:'张三',
    fruit:['apple','banana']
}

var Child1=fun(Parent);
Child1.name='李四';
Child1.fruit.push("grape");
console.log(Child1.name);  //李四
console.log(Child1.fruit); //[ 'apple', 'banana', 'grape']

var Child2=fun(Parent);
Child2.name='王五';
Child2.fruit.push("orange");
console.log(Child2.name);  //王五
console.log(Child2.fruit); //[ 'apple', 'banana', 'grape', 'orange' ]

        由上述测试可以发现，其优缺点和原型链继承一样

        注：还可以使用内置函数Object.create()来代替上述fun的实现，这里不多加赘述。

优点

        简单

缺点

        1.多个实例对引用类型的操作会被篡改，换种方法来讲就是当一个实例对引用类型属性进行修改，这种修改会被其他实例共享

        2.创建子类实例的时候，无法向父类构造函数进行传参

寄生式继承

        寄生式继承实则是在原型式继承的基础上，增强对象，返回构造函数

继承方法

        寄生式继承可以理解为增加一种添加对象新属性和方法的一种方式

//寄生式继承
function fun(obj){
    function Child(){};
    Child.prototype=obj;
    return new Child();
}
//封装一个jisheng函数
function jisheng(obj){
    var copy=fun(obj);
    copy.age=20;
    copy.zimu=['a','b'];
    copy.set=function(){
        console.log('年龄：',this.age);
    }
    return copy;
}

var Parent={
    name:'张三',
    fruit:['apple','banana']
}

var Child1=jisheng(Parent);
//fun
Child1.name='李四';
Child1.fruit.push("grape");
console.log(Child1.name);  //李四
console.log(Child1.fruit); //[ 'apple', 'banana', 'grape']
//jisheng
Child1.zimu.push('c');
console.log(Child1.zimu);  //[ 'a', 'b', 'c' ]
console.log(Child1.age);   //20
Child1.set();              //年龄： 20

var Child2=jisheng(Parent);
//fun
Child2.name='王五';
Child2.fruit.push("orange");
console.log(Child2.name);  //王五
console.log(Child2.fruit); //[ 'apple', 'banana', 'grape', 'orange' ]
//jisheng
Child2.zimu.push('d');
console.log(Child2.zimu);  //[ 'a', 'b', 'd' ]
console.log(Child2.age);   //20
Child2.set();              //年龄： 20

        通过上述测试可以发现，寄生式继承是在原型是继承的基础上，封装一个jisheng函数，对fun返回的函数进行增强，也就是新增方法(当然也可以新增属性)，然后返回。

        对于从fun和jisheng调用的属性和方法分别进行测试，我们发现，如果对从fun调用的引用类型属性进行修改，修改会被其他实例共享，但是对从jisheng调用的引用类型进行修改，修改不会被其他实例共享。 

        对于寄生函数，其实还有一个特点，就是关于从jisheng调用的方法，我们可以进行测试查看：

//测试两个子类中调用寄生函数属性和方法
console.log(Child1.age===Child2.age);  //true
console.log(Child1.set===Child2.set);  //false
//修改子类从寄生属性中获得的属性
Child1.age=22;
console.log(Child1.age);               //22
Child1.set();                          //年龄： 22
console.log(Child1.age===Child2.age);  //false

        我们发现，若两个子类分别调用jisheng函数内的属性和方法，它们的属性是相等的，但是方法不同，也就是说，实现了方法独立。

优点

        1.jisheng函数部分解决了当子类实例修改引用类型属性被其他子类实例共享的问题

        2.为构造函数新增属性和方法，增强函数

缺点

        1.原型链中多个实例对引用类型的操作会被篡改，换种方法来讲就是当一个实例对引用类型属性进行修改，这种修改会被其他实例共享，这种仍然没有解决

        2.无法传递参数 

        3.无法复用父类函数(jisheng函数只是增强函数，不是父类函数！)

        4.每次创建对象都会创建一遍方法     

寄生组合式继承 

        该方法是继承的最优方法，结合上述继承方法的缺点，优化了上述继承方法的缺点

继承方法

        借用构造函数来继承属性，用原型链和寄生结合的方式继承父类原型

//寄生组合继承
function jisheng(Parent,Child){
    var copy=Object.create(Parent.prototype); //创建父类原型的副本
    Child.prototype=copy;    //指定对象
    copy.constructor=Child;  //增强对象
}
//父类初始化实例属性和原型属性
function Parent(name){  //创建父类构造函数
    this.name=name;
    this.fruit=['apple','banana'];
}
Parent.prototype={
    get:function(){
        console.log(this.name+'喜欢的水果是'+this.fruit[2]);
    }
}
//借用构造函数传递加强子类实例属性 可以进行传参
function Child(name){  //创建子类构造函数
    Parent.call(this,name);  //call()方法
    // Parent.apply(this,[name]);  //apply()方法
}
//父类原型指向子类
jisheng(Parent,Child);

ch1=new Child('张三');  //实例对象1
ch2=new Child('李四');  //实例对象2
ch1.fruit.push('pear');
ch2.fruit.push('lemon');
console.log(ch1.fruit); //[ 'apple', 'banana', 'pear' ]
console.log(ch2.fruit); //[ 'apple', 'banana', 'pear' ]
ch1.get();  //张三喜欢的水果是pear
ch2.get();  //李四喜欢的水果是lemon

         通过Object.create()【上面原型式继承提到过，代替上述fun的实现】将父类构造函数原型复制为副本copy，然后将该副本作为子类构造函数的原型，给该副本增加constructor属性(因为前一步修改原型导致副本失去了默认的属性)。完成这一部分后，后面就和之前讲过的继承一样了，这里就不多加赘述。

         通过上述测试我们发现，寄生组合式继承解决了之前集中继承方法的所有问题，所以是最优继承方式

优点

        1.只调用了一次父类构造函数

        2.可以实现父类方法复用

        3.解决了当子类实例修改引用类型属性被其他子类实例共享的问题

        4.子类可以向父类进行传参

张0x0
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
OOP & 继承 & 闭包 & ES5对象扩展
qq_42827425的博客
03-15 241
创建对象及使用 创建对象 对对象进行描述 (1) 有什么(属性) (2) 能做什么(方法) 对象的创建方式 字面量 {} 一般只用于创建单一对象 new Object() 一般只用于创建单一对象 (1)工厂模式：将参数传入函数内，函数内生成对象，给对象设置属性及方法（具体值来自传入 的参数），最后将对象通过return返回出去。 (2)优点:解决了重复创建多个同一类型对象的问题 (3...
ES5-拓展 原型链、继承、类
Stephy_Yy
06-17 91
Symbol不是构造函数 object不是原型是实例对象 他的构造器继承原型上的构造器 undefined是未定义 null是空指针 函数也是实例对象 构造函数Object是由Function构造出来的 Foo.__proto__ === Function.prototype // true Object.__proto__ === Function.prototype // true Function.prototype.constructor === Function // true Fun.
扩展运算符和rest运算符
weixin_30483495的博客
11-28 132
扩展运算符 扩展运算符用三个点号表示，功能是把数组或类数组对象展开成一系列用逗号隔开的值 一、拆分数组 扩展运算符可以直接把数组拆分成用逗号隔开的值 <template> <section class="p-10"> <el-button type="danger" @click="get()">点击</el-button...
JS高级 之 ES5 实现继承
玄鱼殇
07-20 1505
JS高级 之 ES5实现继承
Javascript中Es5继承的6种方式
m0_46420078的博客
11-19 667
学习继承思想I！！！
JavaScript拓展--ES6的继承详解
zxn200125的博客
11-19 401
es6中如何实现继承，和es5继承有什么区别
详解js继承
Welkin_qing的博客
08-08 264
文章目录一、原型链1. 原型关系2. 确定对象之间的关系二、继承1. 原型链继承2. 构造函数继承3. 组合继承（原型链+构造函数）3. 原型式继承 一、原型链 1. 原型关系 函数通过—prototype–指向原型对象 实例对象/原型对象–proto—指向该对象的原型 原型对象—constructor–指向构造函数 2. 确定对象之间的关系 instanceof son.instanceo...
JavaScript进阶（二十六）：ES各版本特性详解
IT全栈 华强工作室
10-13 3542
ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，所以它可以理解为是JavaScript的一个标准，但实际上后两者是ECMA-262标准的实现和扩展。
详解ES6-ES11必掌握的新特性
m0_61732154的博客
04-17 1485
/isConcatSpreadable对应concat，为false即连接后不展开:1，2，3，[4,5,6]import('./hello.js').then(module => { //动态引入，通过import（）函数，其返回的是一个promise。// chunwan('易烊千玺','王源','王俊凯')，arguments伪数组有三个元素。2.先在html页面中引入入口文件，
JavaScript笔记
shine_my的博客
03-13 3258
JavaScript笔记
知识梳理——JavaScript
wytraining
03-14 1335
1. 说说前端中的事件流 HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件onclick、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。 什么是事件流：事件流描述的是从页面中接收事件的顺序. DOM2级事件流包括下面几个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段 addEventListener：addEventListener 是DOM2 级事件新增的指定事件处
秋招准备：前端面试题汇总（题目+答案+详解、不断更新）
志在四方csj的博客
09-16 1074
目录 1.linux中 vim有几种模式？如何进行这几种模式的切换 2.css3中animation与transition表示什么意思？ 3.css中verticle-align规则有什么作用 4.相对定位、绝对定位、固定定位、粘滞定位、静态定位有什么区别？ 5.什么是响应式网页？如何实现一个响应式网页 6.inux中远程登录命令、远程文件传输命令、查看Java进程命令分别是什么？举例说明 7.什么是块元素，块元素有哪些特点？ 8.em 与rem的区别？ 9.如何使用css绘制一个三角形？
全面理解JavaScript中class的实现原理
wosifp的博客
02-07 1320
一、class类概念与语法 ES5之前不存在类的概念，创建对象使用的构造函数，通过new操作符来创建； 为使JS更像面向对象，ES6版本引入class概念，其基本语法： class Cat{ constructor(name,age){ this.name = name; this.age = age; } Say(){ re...
Vue扩展知识概括
weixin_41005188的博客
08-31 1629
--
Vue2 中对数组进行操作时需要注意什么
最新发布
m0_73882020的博客
09-06 474
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
WHAT - React 函数与 useMemo vs useCallback
weixin_58540586的博客
09-03 958
目录介绍`useMemo` 与 `useCallback` 的区别示例代码`useMemo` 示例`useCallback` 示例总结 介绍 在 React 中，useMemo 和 useCallback 是两个用于性能优化的钩子，尽管它们有些相似，但各自有不同的用途和应用场景。理解它们的区别和适用情况可以帮助你更有效地管理组件的性能和状态。 useMemo 与 useCallback 的区别 useMemo: 目的: 用于记忆化（缓存）计算结果。它接受一个计算函数和依赖项数组，只有当依赖项发生变化时
web开发
2301_76876837的博客
09-04 480
我们在访问的网站的时候，一般就是在浏览器的网址栏里输入，再敲个回车，我们就可以访问到我们想要的网站（比如京东）。这是为什么呢？我们访问的浏览器是一个程序，京东也是一个程序，只是京东在人家电脑上运行着，我们只是远程访问了人家的前端页面。我们根据下图来讲解一下web网站的工作流程：我们在浏览器输入我们想要查找的域名，回车（搜索）后，会到，前端服务器接受到请求后会把相对应的前端代码返回给浏览器，浏览器会自动解析前端代码（因为内置了解析引擎），展示出页面效果。前端代码里由一句代码会是访问。
Nginx部署前端Vue项目
不会代码的小林
09-03 1333
Nginx是一款轻量级的高性能Web服务器，可以用于静态文件的托管和反向代理等场景。现在，您可以在浏览器中访问http://example.com（请替换为您自己的域名），应该可以看到Vue应用程序正在运行。请将example.com替换为您自己的域名，将/var/www/my-project/dist替换为Vue项目的dist目录的实际路径。现在，我们需要配置Nginx来托管Vue项目的静态文件。接下来，我们可以使用Vue CLI创建一个新的Vue项目。在部署之前，我们需要先构建Vue项目。
ES6 JavaScript 中的 Class 类继承详解
"ES6中的JavaScript Class类继承详解，包括基本用法、构造函数与super关键字的使用，以及对原型链的理解" 在ES6中，`Class`语法引入了一种新的面向对象编程的表达方式，使得类的继承更加简洁和直观。`Class`类继承...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值