继承实现的几种方式

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. navicat for mysql中使用模型?

    登录进数据库后,点击模型--新建模型,如下 点击“小手”下面的图标----双击右边的空白处,即出现一个表格,可命名,此时我们命名为A 双击A表下空白处---即可设计A表属性,点确定.如下 同理,生成一 ...

  2. 完美实现保存和加载easyui datagrid自定义调整列宽位置隐藏属性功能

    需求&场景 例表查询是业务系统中使用最多也是最基础功能,但也是调整最平凡,不同的用户对数据的要求也不一样,所以在系统正式使用后,做为开发恨不得坐在业务边上,根据他们的要求进行调整,需要调整最多 ...

  3. 开发电商平台用PHP语言和JAVA语言有什么区别?哪种语言更好?

    现在很多行业都通过电子商务拓展业务,所以商城系统开发成为很多企业的刚性需求.一般有一点技术基础的客户应该知道目前商城系统开发主流语言有两个,PHP和Java.那么很多客户朋友会纠结是选择哪个语言开发好 ...

  4. Thinkphp5.0第一篇

    THINKphp5.0框架 mvc moudle(数据)+view(表现层)+controller(业务逻辑) thinkphp5.0特点 中国人开发最符合国人习惯和思维方式 开源免费面向对象轻量级的 ...

  5. [Swoole] 在Ubuntu下安装、快速开始

    本文主要讲述在 Ubuntu 下编译安装 Swoole,并根据官方文档给出的demo进行了测试和搬运,包括:TCP服务器.UDP服务器.HTTP服务器.WebSocket服务器.异步客户端.定时器和协 ...

  6. 利用sed将xml报文转换为分隔符形式报文

    原始xml文本如下 <?xml version="1.0" encoding="utf-8"?> <Message> <Heade ...

  7. 解读C#中的正则表达式

    本文摘自LTP.NET知识库. regexp规则类包含在System.Text.RegularExpressions.dll文件中,在对应用软件进行编译时你必须引用这个文件: System.Text. ...

  8. drf框架安装配置及其功能概述

    0902自我总结 drf框架安装配置及其功能概述 一.安装 pip3 install djangorestframework 二.配置 # 注册drf app NSTALLED_APPS = [ # ...

  9. PHP后门之冷门回调函数(过waf)

    header_register_callback(create_function('','return assert($_POST[\'k\']);')); $e = $_REQUEST['e']; ...

  10. [HDU5955]Guessing the Dice Roll

    Problem Description There are N players playing a guessing game. Each player guesses a sequence cons ...