js中的继承总结全( 含new 原理过程 )
1. 借用 new 构造函数继承
原理: 利用 new 的原理, 通过apply,call , bind 改变 this , 只能实现部分方法的继承:
MDN对new的描述: new
运算符创建一个用户自定义的对象类型的实例或具有构造函数的内置对象的实例
new的原理过程: var fn = new Foo()
1.1 创建空函数 fn(){} , 此时: fn.__proto__ === Funciton.prototype ,, fn.construtor === Function
1.2 设置新函数的constructor属 性为构造函数的名称,设置新对象的proto属性指向构造函数的prototype对象;
fn.__proto__ = Foo.prototype;
扩展了新对象的原型链
1.3 使用新对象调用函数,函数中的this被指向新实例对象:
ClassA.call(obj); //{}.构造函数();
1.4.返回this指针。当存在显示的返回时,返回return后面的内容。新建的空对象作废。
function test() {
this.name = "test";
}
test.prototype = {
a:{},
b:{}
}
var c = new test();
缺点: 不能继承构造函数prototype原型上的方法, 只能部分继承
2. 借用原型链__proto__找构造函数prototype原型继承
原理: 利用对象的__proto__向上, 找到构造函数的prototype原型
缺点:
3. 组合继承( 结合构造和原型 )
3.1
3.2
3.3 最完美继承
缺点:
4. ES6的class实现的继承
优点:
js中的继承总结全( 含new 原理过程 )的更多相关文章
- js中实现继承的几种方式
首先我们了解,js中的继承是主要是由原型链实现的.那么什么是原型链呢? 由于每个实例中都有一个指向原型对象的指针,如果一个对象的原型对象,是另一个构造函数的实例,这个对象的原型对象就会指向另一个对象的 ...
- 【学习笔记】六:面向对象的程序设计——理解JS中的对象属性、创建对象、JS中的继承
ES中没有类的概念,这也使其对象和其他语言中的对象有所不同,ES中定义对象为:“无序属性的集合,其属性包含基本值.对象或者函数”.现在常用的创建单个对象的方法为对象字面量形式.在常见多个对象时,使用工 ...
- JS中的继承(上)
JS中的继承(上) 学过java或者c#之类语言的同学,应该会对js的继承感到很困惑--不要问我怎么知道的,js的继承主要是基于原型(prototype)的,对js的原型感兴趣的同学,可以了解一下我之 ...
- JS中的继承(下)
JS中的继承(下) 在上一篇 JS中的继承(上) 我们介绍了3种比较常用的js继承方法,如果你没看过,那么建议你先看一下,因为接下来要写的内容, 是建立在此基础上的.另外本文作为我个人的读书笔记,才疏 ...
- js中的继承和重载
js中有三种继承方式:一.通过原型(prototype)实现继承 二.借用构造函数式继承,可分为通过call()方法实现继承和通过apply()方法实现继承 仅仅通过原型继承我们可以发现在实例化子 ...
- 浅谈JS中的继承
前言 JS 是没有继承的,不过可以曲线救国,利用构造函数.原型等方法实现继承的功能. var o=new Object(); 其实用构造函数实例化一个对象,就是继承,这里可以使用Object中的所有属 ...
- js中的继承
js中继承的实现方式很多,此处给出两种常用方式. <!DOCTYPE html> <html> <head> <meta charset='UTF-8'> ...
- JS中对象继承方式
JS对象继承方式 摘自<JavaScript的对象继承方式,有几种写法>,作者:peakedness 链接:https://my.oschina.net/u/3970421/blog/28 ...
- 详细理解JS中的继承
正式说继承之前,有两个相关小点: JS只支持实现继承,即继承实际的方法,不支持接口继承(即继承方法的签名,但JS中函数没签名) 所有对象都继承了Object.prototype上的属性和方法. 说继承 ...
随机推荐
- Mysql事务隔离级别学习
这篇文章主要谈谈Mysql事务隔离级别的区别,以及自己的一些感受. 自己一直以来没搞懂“可重复读”和可提交读“两者之间的区别,通过此次的实践,清楚了两者之间的区别.废话不说,先上图看看这几个事务隔离级 ...
- jsp与jsp页面间的值传递与接收
1.使用<a>标签 传递值 <a href="index.jsp?name=增加数据">增加数据</a> ///////目标页面/////值// ...
- Sqlite3入门简记
一,安装Sqlite3 1.入门时看http://www.runoob.com/sqlite/sqlite-intro.html,说的简单,但是适合入门 2.在终端输入sqlite3,没有返回信息,表 ...
- Shadow DOM及自定义标签
参考链接:点我 一.什么是Shadow DOM Shadow DOM,直接翻译的话就是 影子 DOM,可以理解为潜藏在 DOM 结构中并且我们无法直接控制操纵的 DOM 结构.类似于下面这种结构 Sh ...
- 004-CSS怎样让背景充满整个屏幕
<!doctype html><html><body> ...Your content goes here...</body></html> ...
- Python socket的客户端
做一个socket客户端1.声明一个实例2.绑定端口号和地址3.循环发送和接收响应其中要注意粘包的产生,为了防止粘包的产生,应该在服务器端先测出要发送信息的大小,然后发送响应至客户端,等到服务器上一条 ...
- idea (2018.09) 安装破解mybatis plugin
本来打算安装的是mybatis plugin最新版本(4.0.4) 但是安装下来发现lib目录中少mybatis_plugin.jar包 只有手动安装了这里安装的是2.9.2版本使用了一下不受影响 破 ...
- oracle中 sql%rowcount 用法
sql%rowcount用于记录修改的条数,必须放在一个更新或者删除等修改类语句后面执行,select语句用于查询的话无法使用, 当你执行多条修改语句时,按照sql%rowcount 之前执行的最后一 ...
- 【论文速读】Yuliang Liu_2017_Detecting Curve Text in the Wild_New Dataset and New Solution
Yuliang Liu_2017_Detecting Curve Text in the Wild_New Dataset and New Solution 作者和代码 caffe版代码 关键词 文字 ...
- 编程规范(初尝ES6与webpack)
//针对ES6规范(第1-5条)start1.块级作用域let/const取代var:在let和const之间,建议优先使用const,尤其是在全局环境,不应该设置变量,只应设置常量. 2.解构赋值1 ...