继承实现的几种方式

1.借助call实现继承

function p1() {
this.name = 'p1'
this.say = function () {
console.log(this.name)
}
}
var Parent1 = p1 Parent1.prototype.show = function show() {
console.log(this.name)
} function Child1() {
Parent1.call(this)
this.type = 'c1'
}
console.log(new Child1()) // Child1 { name: 'p1', say: [Function], type: 'c1' }
/*
* p1 {name: "p1", say: ƒ}
name: "p1"
say: ƒ ()
__proto__:
show: ƒ show()
constructor: ƒ p1()
__proto__: Object
*
*/
console.log(new Parent1())

这种方式

子类能够拿到父类的属性值,但是问题是父类原型对象中一旦存在方法,那么子类无法继承。
 
2.借助原型链实现继承
function Parent2() {
this.name = 'p2'
this.play = [1,2,3]
this.say = function() {
console.log(this.name)
}
this.obj = {
habbit: '学习'
}
}
function Child2 () {
this.type = 'c2'
}
Child2.prototype = new Parent2()
console.log(new Child2()) var s1 = new Child2();
var s2 = new Child2();
s1.play.push(4);
console.log(s1.play, s2.play); // (4) [1, 2, 3, 4] (4) [1, 2, 3, 4]

这种方式

在改变是s1的paly属性值时,s2也会跟着变化,原因时两个实例使用的是同1个原型对象
这种情况只是在数组或者对象时会发生同时变化,改变name值就不会发生变化
 
3.组合继承 将两者结合
function Parent3() {
this.name = 'p3'
this.play = [1,2,3,4]
this.say = function(){
console.log(this.play)
}
this.obj = {
news: 'sdsds'
}
}
function Child3() {
Parent3.call(this)
this.type = 'c3'
}
Child3.prototype = new Parent3()
var s3 = new Child3()
var s4 = new Child3()
s3.play.push(9)
s3.obj.news = 'nff'
s3.say= function() {console.log(2222)}
console.log(s3.play, s4.play)
console.log(s3.obj.news, s4.obj.news)
s3.say()
s4.say()

这种方式

会多执行Child3.prototype = new Parent3() 这一句

 
4. 组合继承优化
function Parent4() {
this.name = 'p4'
this.play = [1,2,3,4]
this.say = function(){
console.log(this.play)
}
this.obj = {
news: 'sdsds'
}
} function Child4() {
Parent4.call(this)
this.type = 'c4'
} Child4.prototype = Parent4.prototype var s3 = new Child4();
var s4 = new Child4();
console.log(s3)
这种方式
将父类的原型对象直接给到子类,父类构造函数只执行一次,而且父类属性和方法均能访问
但是会发现,子类的构造函数竟然时Parent4,这是有问题的,应该时Child4
 
5.接着优化
function Parent5() {
this.name = 'p5'
this.play = [1,2,3,4]
this.say = function(){
console.log(this.play)
}
this.obj = {
news: 'sdsds'
}
} function Child5() {
Parent5.call(this)
this.type = 'c5'
} Child5.prototype = Object.create(Parent5.prototype)
Child5.prototype.constructor = Child5

这种方式,较常用,当然,es6推除了class,直接继承,就不用这么麻烦了

 
 

js中几种继承实现的更多相关文章

  1. js的6种继承方式

    重新理解js的6种继承方式 注:本文引用于http://www.cnblogs.com/ayqy/p/4471638.html 重点看第三点 组合继承(最常用) 写在前面 一直不喜欢JS的OOP,在学 ...

  2. 细说 js 的7种继承方式

    在这之前,先搞清楚下面这个问题: function Father(){} Father.prototype.name = 'father'; Father.prototype.children = [ ...

  3. [转]js中几种实用的跨域方法原理详解

    转自:js中几种实用的跨域方法原理详解 - 无双 - 博客园 // // 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同 ...

  4. 关于js中两种定时器的设置及清除(转载)

    1.JS中的定时器有两种: window.setTimeout([function],[interval]) 设置一个定时器,并且设定了一个等待的时间[interval],当到达时间后,执行对应的方法 ...

  5. JS中几种常见的数组算法(前端面试必看)

    JS中几种常见的数组算法 1.将稀疏数组变成不稀疏数组 /** * 稀疏数组 变为 不稀疏数组 * @params array arr 稀疏数组 * @return array 不稀疏的数组 */ f ...

  6. [js]js中4种无节操的预解释情况

    js中4种无节操的预解释情况 - 1. if语句即使条件不成立,条件里的表达式也会进行预解释. - 2. 匿名函数的预解释: 只对等号左边与解释 - 3. 自执行函数的预解释: 不进行预就解释, 执行 ...

  7. [js]js中6种错误处理机制

    js中6种错误 http://javascript.ruanyifeng.com/grammar/error.html#toc5 https://www.jianshu.com/p/467b9a145 ...

  8. js中三种定义变量 const, var, let 的区别

    js中三种定义变量的方式const, var, let的区别 1.const定义的变量不可以修改,而且必须初始化. 1 const b = 2;//正确 2 // const b;//错误,必须初始化 ...

  9. JS中5种经典继承方式

    继承 JS中继承的概念: 通过[某种方式]让一个对象可以访问到另一个对象中的属性和方法,我们把这种方式称之为继承 并不是所谓的xxx extends yyy 为什么要使用继承? 有些对象会有方法(动作 ...

随机推荐

  1. web前端之面试:自我介绍

    面试官您好, 首先很感谢贵公司的面试邀请, 让我有这个幸运机会能来到这里和您交流 : 接下来我做一个简单的自我介绍: 我的姓名是 XX, 祖籍是XX, 年龄是24, 学校是 XXX, 专业是XXX: ...

  2. 将jar包发布到maven的中央仓库细节整理

    在学习springboot框架的时候,会引入各种各样的starter依赖,照着教程尝试写了个demo-spring-boot-stater,可以理解为一个组件,随引随用 但是只能自己引用,无法共享,于 ...

  3. Android 世界中,谁喊醒了 Zygote ?

    本文基于 Android 9.0 , 代码仓库地址 : android_9.0.0_r45 文中源码链接: SystemServer.java ActivityManagerService.java ...

  4. 各种常见文件的hex文件头

    我们在做ctf时,经常需要辨认各种文件头,跟大家分享一下一些常见的文件头.   扩展名 文件头标识(HEX) 文件描述 123 00 00 1A 00 05 10 04 Lotus 1-2-3 spr ...

  5. .Net Core中的ObjectPool

    一.对象池 运用对象池化技术可以显著地提升性能,尤其是当对象的初始化过程代价较大或者频率较高.下面是ObjectPool源码中涉及的几个类.当你看过.Net Core源码很多时,你会发现,微软的开发很 ...

  6. DRF框架中csrf异常

    一.报错信息 "detail": "CSRF Failed: CSRF cookie not set." 二.解决办法 方法一: 在配置文件中配置 REST_F ...

  7. LeetCode初级算法--链表01:反转链表

    LeetCode初级算法--链表01:反转链表 搜索微信公众号:'AI-ming3526'或者'计算机视觉这件小事' 获取更多算法.机器学习干货 csdn:https://blog.csdn.net/ ...

  8. Python_散点图与折线图绘制

    在数据分析的过程中,经常需要将数据可视化,目前常使用的:散点图  折线图 需要import的外部包  一个是绘图 一个是字体导入 import matplotlib.pyplot as plt fro ...

  9. Redis 哨兵机制以及灾难演练

    #### 哨兵都采用这个配置即可 ##### 1.修改sentinel.conf配置文件 ![image](https://img2018.cnblogs.com/blog/1334966/20191 ...

  10. JavaScript ES6函数式编程(二):柯里化、偏应用和组合、管道

    上一篇介绍了闭包和高阶函数,这是函数式编程的基础核心.这一篇来看看高阶函数的实战场景. 首先强调两点: 注意闭包的生成位置,清楚作用域链,知道闭包生成后缓存了哪些变量 高阶函数思想:以变量作用域作为根 ...