继承实现的几种方式

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. dede tag标签静态化

    看回那2个文件夹即可,txt说明书我已经修改过. 下面说一下tag标签静态化之后在内容页.列表页中如何使用. 内容页中沿用之前的方法即可: {dede:tag sort='new' getall='0 ...

  2. Python集训营45天—Day08 (文件操作)

    目录 1. 文件操作介绍 2. 文件的读写 2.1 文本文件 2.2 二进制文件 2.3 JSON文件 3. 文件的定位,重命名和删除 4. 文件夹的相关操作 1. 文件操作介绍 大家应该听说过一句话 ...

  3. Netty中粘包和拆包的解决方案

    粘包和拆包是TCP网络编程中不可避免的,无论是服务端还是客户端,当我们读取或者发送消息的时候,都需要考虑TCP底层的粘包/拆包机制. TCP粘包和拆包 TCP是个“流”协议,所谓流,就是没有界限的一串 ...

  4. 项目二:企业级java电商网站开发(服务端)

    声明:项目源于网络,支持正版教程,学习使用,仅记录在此 项目介绍 企业级java电商网站开发(服务端),模块划分:用户管理,商品管理,商品品类管理,订单管理,订单详情管理,购物车管理,收货地址管理,支 ...

  5. cocos2d-x 系统学习cocos(1)

    简析HelloWorld场景 以前使用cocos2d-x 3.14的时候,HelloWorld并不是一个场景类,而是一个图层类,当时的HelloWorld::createScene()是长这样的 Sc ...

  6. 走进JavaWeb技术世界1:JavaWeb的由来和基础知识

    本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutorial 喜欢的话麻烦点下 ...

  7. Java中获取刚插入数据库中的数据Id(主键,自动增长)

    public int insert(String cName, String ebrand, String cGender) { String sql = "insert into Clot ...

  8. DRF框架中csrf异常

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

  9. 关于StreamReader的知识分享

    今天我们来简单的介绍一下StreamReader,在将StreamReader之前,我们先来了解一下他的父类:TextReader.对于TextReader,大家可能比较陌生,下面我们来看一下Text ...

  10. 使用WSL中开发调试.NET Core

    安装WSL 1.打开WINDOWS功能,勾选子系统选项 2.打开商店搜索WSL,安装ubuntu 我这里的系统版本是:18.04 如何查看ubuntu系统版本 sudo lsb_release -a ...