js中实现继承的不同方式以及其缺点
1.利用call和apply,借助构造函数
fucntion P(){
this.name = "P";
}
fucntion C1(){
P.call(this);
}
解释一下,P.call(this)的意思,就是将P的上下文指向C的上下文。
那么,什么是上下文呢,比如说,我有一把菜刀,可以用来杀猪,那么这里我就是菜刀的上下文。你没有,但是有一天你也要去杀猪,怎么办,最简单的方式就是向我借,而不是自己去买,向我借就是说菜刀的上下文被指给你了。
call函数和apply都是用来指定上下文的,但是call后面可以传递多个参数,而apply只能用来传递一个参数(也可以多个,不过要写成数组的形式)


好,第一种方式解决了。但是第一种方法是有缺点的,就是子类只能继承构造函数里面的东西,而父类的原型函数上是继承不到的。
2.借助原型链
fucntion P(){
this.name = "P";
}
fucntion C2(){
}
C2.prototype = new P();
var c2 = new C2();
最后一句话的意思,就是将P实例成一个实例对象,然后,将这个对象作为子类的原型对象。
这种方法使用了原型链,但是由于直接绑定了原型函数,导致了一些问题。
fucntion P(){
this.name = "P";
}
fucntion C2(){
}
C2.prototype = new P()
var s1 = new C2();
var s2 = new C2();
//这里,如果我们修改s1的东西
s1.name = "PPPP";
console.log(s2.name);//结果是 PPPP
原因是啥,因为s1和s2都是引用的同样的原型对象,所以,当s1的值修改,实际上就是修改了原型对象的值,因此,s2的值也会修改。很明显,这种方法是很不好的。
3.构造函数+原型链(组合方式)
fucntion P(){
this.name = "P";
}
fucntion C3(){
P3.call(this);
}
C3.prototype = new P();//2
var c3 = new C3();//1
将两种方法的优点结合起来,这就是我们通常的方法。
实际上,这么写,有点小问题,实例化了两次对象(代码中表明了),浪费内存。
优化方式,直接在原型对象层面上进行就可以了,在//2的位置
C2.prototype = P.prototype
ES6中的方法以后再看。
js中实现继承的不同方式以及其缺点的更多相关文章
- js中实现继承的几种方式
首先我们了解,js中的继承是主要是由原型链实现的.那么什么是原型链呢? 由于每个实例中都有一个指向原型对象的指针,如果一个对象的原型对象,是另一个构造函数的实例,这个对象的原型对象就会指向另一个对象的 ...
- JS中的继承方式总结
1. 原型链继承(又称类继承) Child.prototype = new Parent(); function Parent (name, age) { this.name = name; this ...
- 【学习笔记】六:面向对象的程序设计——理解JS中的对象属性、创建对象、JS中的继承
ES中没有类的概念,这也使其对象和其他语言中的对象有所不同,ES中定义对象为:“无序属性的集合,其属性包含基本值.对象或者函数”.现在常用的创建单个对象的方法为对象字面量形式.在常见多个对象时,使用工 ...
- JS中的继承(上)
JS中的继承(上) 学过java或者c#之类语言的同学,应该会对js的继承感到很困惑--不要问我怎么知道的,js的继承主要是基于原型(prototype)的,对js的原型感兴趣的同学,可以了解一下我之 ...
- js中的继承和重载
js中有三种继承方式:一.通过原型(prototype)实现继承 二.借用构造函数式继承,可分为通过call()方法实现继承和通过apply()方法实现继承 仅仅通过原型继承我们可以发现在实例化子 ...
- JS中的继承(下)
JS中的继承(下) 在上一篇 JS中的继承(上) 我们介绍了3种比较常用的js继承方法,如果你没看过,那么建议你先看一下,因为接下来要写的内容, 是建立在此基础上的.另外本文作为我个人的读书笔记,才疏 ...
- JS中对象继承方式
JS对象继承方式 摘自<JavaScript的对象继承方式,有几种写法>,作者:peakedness 链接:https://my.oschina.net/u/3970421/blog/28 ...
- JS中的继承实现方式
第一种:通过prototype来实现 prototype.html <!DOCTYPE html><html lang="en"><head> ...
- js中的继承
js中继承的实现方式很多,此处给出两种常用方式. <!DOCTYPE html> <html> <head> <meta charset='UTF-8'> ...
随机推荐
- OpenVPN的那些坑
遇到的情形 最近遇到一种情况,当需要同时使用到多个VPN连接时,默认的openVPN连接是不支持的,但是可以通过手动配置虚拟网络适配器进行相关的设置. 具体解决方法 基本思路是:在本地的网络连接中添加 ...
- angularjs 控制器、作用域、广播详解
一.控制器 首先列出几种我们平常使用控制器时的几种误区: 我们知道angualrJs中一个控制器时可以对应不同的视图模板的,但这种实现方式存在的问题是: 如果视图1和视图2根本没有任何逻辑关系,这样& ...
- js在工作中遇到的一些问题
前言 js这种语言没有太多封装好的模式或者统一的编程方式,所以一些细节的问题很容易导致bug,那下面就写为:一份坚固的代码是什么样的. 持续更新一下,记一些good case和bug. 事件绑定的选择 ...
- LeetCode第六天
第六天 30.(219) Contains Duplicate II JAVA class Solution { public boolean containsNearbyDuplicate(int[ ...
- UVA - 1220 Party at Hali-Bula 树的最大独立集
题意: 给定n个人,存在上下级关系,每个人只有一个上级,求最大独立集.并判断最大独立集是否唯一 思路:d[i][0]表示以i为根的子树中,不选择第i个节点的最大独立集,f[i][0]表示以i为根的子 ...
- Sping Boot入门到实战之入门篇(四):Spring Boot自动化配置
该篇为Sping Boot入门到实战系列入门篇的第四篇.介绍Spring Boot自动化配置的基本原理与实现. Spring Boot之所以受开发者欢迎, 其中最重要的一个因素就是其自动化配置特性 ...
- 解析setTimeout时间设置为0
1.开胃菜,setTimeout为何物 首先看一下w3school上面对于setTimeout的解释 setTimeout(fn,millisec) 方法用于在指定的毫秒数后调用函数或计算表达式. 很 ...
- ubuntu16.04卸载软件
root@test:/# dpkg -l | grep cobbler root@test:/# sudo dpkg --purge cobbler
- BT656跟BT1120和BT709有什么区别
601是SDTV的数据结构 656是SDTV的interface709是HDTV的数据结构 1120是HDTV的interface从数据结构上 都是Y Cb Cr只是SDTV用4:2:2 HDTV ...
- dojo表格分页之各个参数代表的意义(一)
下面是dojo表格分页参数代表的意义 //每页可以显示10/15/20/25/30条记录 (1)pageSizes: [10, 15, 20, 25,30], //每页显示的记录从多少到多少,共多少条 ...