JS中常见的几种继承
1原型链继承
子类构造函数.prototype = 父类的实例; 子类构造函数.prototype.constructor = 子类构造函数
特点:
1.js继承是把父类的原型放到子类的原型链上,实例想要调用这些方法,其实是基于__proto__原型链的机制查找完成的
2.子类可以重写父类上的属性和方法
3.父类中私有的或者公有的属性和方法, 最后都会变成子类公有的属性和方法
//父类function Parent(x) {this.x = x}Parent.prototype.getX = function () {console.log(this.x);}//子类function Son(y) {this.y = y}Son.prototype = new Parent(100);//{x:100} ==> __proto__.getX =fnSon.prototype.constructor = B;Son.prototype.getY = function () {console.log(this.y);}let b = new Son(200);b.x //==> undefinedb.getX(); //==> b.getX is not a functionconsole.log(a);//{x:100} ==> __proto__.getX =fnconsole.log(b);//{y:200} ==> __proto__.getY =fn
2call继承
在子类构造函数中把父类构造函数当作普通的函数执行, 并且通过call方法把父类构造函数中的this替换成子类的实例(this), 这样相当于给子类实例设置了私有的属性和方法
特点:
1.只能继承父类私有的属性和方法(因为只是把父类构造函数当作普通函数执行了一次,跟父类的原型上的方法和属性没有任何关系)
2.父类的私有的属性和方法 都会变成子类私有的属性和方法
//父类function A(x) {this.x = x;this.seyHello = function (){console.log("hello world");}}A.prototype.getX = function () {console.log(this.x);}let a = new A(100);// A(100);//this => window//子类function B(y,x) {this.y = y; //this ==> b// A(100);//this => windowA.call(this, x);//this => b// this.x = x}B.prototype.getY = function () {console.log(this.y);}let b = new B(200, 100);console.log(b)
3组合继承
结合原型链继承和借用构造函数继承组合起来实现的继承
特点:
(call继承)
1.子类实例可以使用父类私有的属性和方法
2.父类私有的属性和方法都会变成子类实例私有的属性和方法(原型链继承)
3.子类实例可以通过原型链访问和使用父类公有的属性和方法
4.子类的原型链上会存在一份多余的父类的私有属性和方法
//父类function A(x) {this.x = x;this.seyHello = function () {console.log("hello world");}}A.prototype.getX = function () {console.log(this.x);}//子类function B(y, x) {this.y = y;A.call(this, x);}B.prototype = new A();B.prototype.constructor = B;B.prototype.getY = function () {console.log(this.y);}let b = new B(200, 100);console.log(b);
4寄生组合继承
结合原型链继承和call继承的方法,同时自己创建一个对象,并且让这个对象的原型指向父类构造函数的prototype.实现寄生组合继承
特点:
1.最完美的js继承解决方案
2.父类私有的属性和方法,成为子类实例私有的属性和方法
3.父类公有的属性和方法,成为子类实例公有的属性和方法
//父类function A(x) {this.x = x;this.seyHello = function () {console.log("hello world");}}A.prototype.getX = function () {console.log(this.x);}//子类function B(y, x) {this.y = y;A.call(this, x);}/* let obj = {};obj.__proto__ = A.prototype//因为IE浏览器不支持用户在js中直接使用或者修改__proto__B.prototype = obj*/B.prototype = Object.create(A.prototype);B.prototype.constructor = B;B.prototype.getY = function () {console.log(this.y);}let b = new B(200, 100);console.log(b);// Object.create(arg) 创建空的对象,并且让这个空对象的__proto__指向传递的第一个参数Object.create = function (arg){//因为IE浏览器不支持用户在js中直接使用或者修改__proto__/*let obj = {};obj.__proto__ = arg;return obj*/function NewObj(){}NewObj.prototype = arg;return new NewObj()}
5 ES6中的Class类和继承
ES6 class继承
通过extends来实现继承
class 子类 extends 父类
在constructor中要使用super()
特点
1.父类私有的属性和方法 会变成子类私有的属性和方法
2.父类公有属性和方法 会变成子类公有的属性和方法
class B extends A{// 通过extends 实现原型链继承constructor(y) {// Must call super constructor in derived classbefore accessing 'this' or returning from derived constructorsuper(100); // call继承(借用构造函数继承)this.y = y;}getY = function () {console.log(this.y);}
}
class B extends A{// 通过extends 实现原型链继承//如果不写constructor,不会报错 继承会正常实现//如果不写constructor, 浏览器会自动的帮我们去创建一些代码// constructor(...arg){// super(...arg)// }/*constructor(y) {// Must call super constructor in derived class before accessing 'this' or returning from derived constructorsuper(100); // call继承(借用构造函数继承)this.y = y;}*/getY = function () {console.log(this.y);}}let b = new B(200);console.log(b)
JS中常见的几种继承相关推荐
- js数组获取index_通过事例重温一下 JS 中 常见的15 种数组操作(备忘清单),收藏...
数组是 JS 中广泛使用的数据结构.数组对象提供了大量有用的方法,如array. forEach().array.map()等来操作数组. 在实战中,我经常对数组可能的操作和相应采用哪个更好的方法不知 ...
- JS中对象的四种继承方式:class继承、原型链继承、构造函数继承、组合继承(构造函数和原型链继承的结合)
前言 才发现之前没有对JavaScript中的继承做过总结,不过看得到是不少,接下来就对这几种继承方式做一下总结. class继承 class继承是ES6引入的标准的继承方式. ES6引入了class ...
- JS中常见的几种高阶函数
1.什么是高阶函数? 高阶函数英文叫Higher-order function.JavaScript的函数其实都指向某个变量.既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一 ...
- JavaScript中常见的几种继承方式
继承方式一:混入继承 "use strict";//object:A let Oa= {money: 'many money',resource: 'company,house', ...
- 【JS继承】常见的7种继承方式
自我介绍:大家好,我是吉帅振的网络日志:微信公众号:吉帅振的网络日志:前端开发工程师,工作4年,去过上海.北京,经历创业公司,进过大厂,现在郑州敲代码. JS继承专栏 1[JS继承]什么是JS继承? ...
- 浅谈JS中常见的问题(三)
往期文章目录 浅谈JS中常见的问题(一) 浅谈JS中常见的问题(二) JS知识总结 往期文章目录 前言 11. 同步和异步的区别 12. JS 判断变量类型的几种方法 13. 如何阻止事件冒泡与默认事 ...
- zhlan--Python中常见的几种格式化输出
>>>Python中常见的几种格式化输出 # 字符串格式化:name = input('请输入你的名字:')sex = input('请输入你的性别:')print('欢迎你'+na ...
- JS中通过call方法实现继承
JS中通过call方法实现继承 原文:JS中通过call方法实现继承 讲解都写在注释里面了,有不对的地方请拍砖,谢谢! <html xmlns="http://www.w3.org/1 ...
- 【温故知新】——原生js中常用的四种循环方式
一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0 网页输出"欢迎下次光临" 在网页中弹出框输入1 网页输 ...
最新文章
- java中bean文件主要实现内容_JavaBean简单及使用
- 不支持图形化界面的Linux系统如何显示图像化界面?飞腾服务器显示图像化界面方法,DISPLAY environment variable is undefined问题解决方法
- tf.ConfigProto()函数
- python实现WebsocketServer 服务端
- 电机编码器调零步骤_编码器原理、霍尔应用原理、调整步骤三个方面进行解读编码器调试...
- 提升体验-支持Chrome Custom Tabs
- apt-get常用命令及工作原理
- 2017河北对口计算机试题,2017河北省对口升学计算机专业理论试题(附答案解析).doc...
- mono for android定义,2.1.3 使用Mono for Android的原因
- 程序员专属段子集锦 2/10
- 如何自学python知乎-马哥教育官网-专业Linux培训班,Python培训机构
- 《软件测试》实验一:测试入门
- java 调用net remoting_获取 org.springframework.remoting.RemoteAccessException: 在进行调用时无法访问远程服务?...
- python画满天星_跟我学解Python题-海龟制图满天星
- 《畅玩NAS》家庭 NAS 服务器搭建方案
- c语言10以内奇数的乘积,求奇数的乘积
- 中国男人到底配不配得上中国…
- mac charles代理设置
- 如何判断一个数是否是NaN
- 魔百盒哪款型号配置高_哪种电脑配置好 这两款电脑配置高良心价格
热门文章
- python处理word表格excel_用python轻轻松松操作Excel、Word、CSV,一文就够了!
- 财务系统无法连接到服务器,用友T3客户端无法连接到服务器用友T3 11.2标准版
- Armitage之——使用Cortana创建自定义菜单
- 2013年工作中遇到的20个问题:201-220
- 高校邦python程序设计基础_2020高校邦【慧学杯】Python程序设计基础【实境编程】(2020秋)作业答案...
- 购物车案例(jquery案例)
- [翻译练习] Swift Package Manager 重写 macOS 部署目标
- GitFlow分支模型
- 串口收发乱码解决方案
- OPPO Enco Air2i怎么样?长续航高性价比值得买