Js类的构建与继承案例详解
更新时间:2021年9月15日 00:00 点击:1392
JS里类的定义和继承实在五花八门,所以单独开一个笔记本记录。
定义
派生于Object的方式
1.new Object:在创建对象后动态定义属性、方法 var Car = new Object; Car.color = "red"; Car.showColor = function(){ console.log(this.color); } //想要继承就要先构造空对象然后用__proto__原型链来继承 var Car1 = new Object; //或者 = {} Car1.__proto__ = Car;
使用函数构造
1.工厂函数:在函数内生成类,好处是不用再构造空对象+继承原型链,直接返回一个对象的复制,类似于构造函数 function createCar(){ //也可以为此函数传递参数creatCar(color) let car = new Object; car.color = "red"; //传递参数:car.color = color car.showColor = function(){ console.log(this.color); } return car; } var newCar = createCar(); //传递参数:createCar("red") //但是使用工厂函数,每构造一个函数就会构建一次showColor方法,很不划算 //所以可以在类的工厂函数之前为所有类统一确定一个用于继承的方法 function showColor(){ console.log(this.color); } function createCar(){ ... car.showColor = showColor; ... } 2.构造函数方法:类似于工厂函数方法,使用构造函数方法。不同的是构造函数内属性只能为this.attr function Car(color,num){ this.color = color; this.num = num; this.showColor = function(){ console.log(this.color); } this.drivers = new Array("mike"); } var car1 = new Car("red",1); //注意,此时Car本身的属性和方法不能被访问,只能实例化之 后访问 //比如:console.log(new Car("red",1).color) //这表示,构造函数真的是类似类的构造函数而非实例化对象,js也 //有传统意义的对象而不是只有函数对象 //和方式1一样Car的类内函数showColor将在每次构造时被构造出来,占据了没必要的空间 var car2 = new Car("green",1); car1.drivers.push("kiki"); console.log(car2.drivers); //不存在引用同一个数组的现象 3.原型方法:类似于Object派生,形成基于Object的原型链,再绑定方法和属性 function Car(){}; Car.prototype.color = "red"; Car.prototype.showColor = function(){ console.log(this.color); } //Car.prototyoe = { //把多个绑定的函数放进一个匿名的类来写 // mathod1:function(){...}; // mathod2:function(){...}; //} Car.prototype.drivers = new Array("mike","jhon"); var car1 = new Car(); //一定要创建实例才能调用方法访问属性 var car2 = new Car(); car1.drivers.push("bill"); console.log(car1.color); console.log(car2.drivers); //这样绑定arry的属性全部都指向同一个数组对象,属于引用。当改变一个实例的color,所有的color都一起变了
混合方法:
1.构造函数+原型:构造函数内只构造属性和类内数组,而用原型的方式声明类内函数 function Car(color){ this.color = color; this.drivers = new Array("mike"); } Car.prototype.showColor = function(){ console.log(this.color); } var car1 = new Car(); //一定要创建实例才能调用方法访问属性 var car2 = new Car(); car1.drivers.push("bill"); console.log(car2.drivers); //避免了原型方法的缺点 2.使用class关键字定义类:不能在类外直接定义属性,仍需要使用prototype方法在类外绑定函数对象。 class Car{ constructor(color) { this.color = color; } drivers = new Array("mike","jhon"); hello = function(){ return "Di Di"+ this.color; } } Car.prototype.hello = function (){ //类外绑定方法 return "Di Di"; } var car1 = new Car("red"); var car2 = new Car("green"); car1.drivers.push("kiki"); console.log(car1.color); console.log(car2.hello());
综上,当在类内定义变量时,在构造实例时会随之一起调用构造函数进行构造,而类外绑定的方法、属性将会是一种引用的形式不参与构造直接调用。同时,也便于保密,隐藏信息。
继承
1.伪装继承:把类作为新类的构造函数来继承,有点神奇,js里类可以当成函数对象的奇特属性 function Car1(color){ this.color = color; this.showColor = function(){ console.log("this car is "+this.color); } this.drivers = new Array("mike"); } function Car2(){ this.makeSound = function(){ console.log("Di Di"); } } function Car3(color){ this.newConstruct = Car1; //作为构造函数传入 this.newConstruct(color); //调用构造函数 delete this.newConstruct; this.newConstruct2 = Car2; //多重继承,但是由于闭包机制,要用不同的构造函数名 this.newConstruct2(); delete this.newConstruct2; }//同样,伪装继承也可以用.prototype来绑定构造函数 var car1 = new Car3("red"); var car2 = new Car3("green"); car1.drivers.push("kiki"); console.log(car1.color); car1.showColor(); car1.makeSound(); console.log(car2.drivers); 2.用父类的方法call和apply进行继承 function Car1(color){ this.color = color; this.showColor = function(){ console.log("this car is"+this.color); } } function Car2(num){ this.num = num; this.makeSound = function(){ console.log("Di Di"); } } function Car3(color,num){ Car1.call(this, color); Car2.apply(this, augments);//augments为一个数组,包含所需的参数 } var car1 = new Car3("red",1); var car2 = new Car3("green",2); console.log(car1.color); console.log(car2.num); car1.showColor(); car1.makeSound(); //也可以把.apply和.call写在类外,但只能对实例进行操作,不能用于构成类 3.用原型链进行继承:使用__proto__和.prototype构成原型链,缺点是不能实现多重继承,只能通过绑定成构造函数或者再创造几个类用链式方式继承来来实现多重继承 function Car1(color){ this.color = color; this.showColor = function(){ console.log("this car is"+this.color); } } function Car3(){}; Car3.prototype = new Car1(); 4.用class...extends...,也可以实现继承,但是不能实现多重继承,也只能像原型链一样用多个类作为节点的方式来实现多重继承,属于是ES6的特性了。ES6还引入了let、public、private、protected关键字但是不能实现多重继承,也没有什么包的概念也是挺奇葩的 class Car2 extends Car1{ constructor(color) { super(); //类似java,super本身可以代表父类,此处是用了代表父类的 //构造函数 this.color = color; } drivers = new Array("mike","jhon"); hello = function(){ return "Di Di"+ this.color; } }
5.使用参数可变的封装函数extend(需要自己实现)实现多个类的按顺序继承extend(A,B,C)的链式继承,B节点继承A,C继承B(实际上还是链式方式,但是封装了好理解,是知乎大佬晓宏和csdn大佬浴盆的答案,https://blog.csdn.net/sysuzhyupeng/article/details/54846949知乎那个写法不容易理解)。主要还是利用类可以为函数并可作为返回值的特性
所以,正常情况下:创建类用class或者构造函数+原型的方式;继承类用class...extends...
或者call
方法。了解工厂方法和伪装继承。
重载就不细究了,和class一样不完善,只能自己用augments.length去实现。
到此这篇关于Js类的构建与继承案例详解的文章就介绍到这了,更多相关Js类的构建与继承内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
上一篇: Jquery之datagrid查询详解
下一篇: JavaScript 数组去重详解
相关文章
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28
- 本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码,有需要的小伙伴可以参考下。...2016-01-20
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 这次文章要给大家介绍的是node.JS md5加密中文与php结果不一致怎么办,不知道具体解决办法的下面跟小编一起来看看。 因项目需要,需要Node.js与PHP做接口调用,发现nod...2017-07-06
- 系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter。如果对smarty比较熟悉的话,学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解,感兴趣的朋友一起学习吧...2015-12-29
- 使用require('crypto')调用加密模块。加密模块需要底层系统提供OpenSSL的支持。它提供了一种安全凭证的封装方式,可以用于HTTPS安全网络以及普通HTTP连接。该模块还提供了一套针对OpenSSL的hash(哈希),hmac(密钥哈希),cipher...2014-06-07
- 这篇文章主要介绍了Nodejs回调加超时限制两种实现方法的相关资料,需要的朋友可以参考下...2017-06-15
- 1.什么是异步编程? 异步编程是指由于异步I/O等因素,无法同步获得执行结果时, 在回调函数中进行下一步操作的代码编写风格,常见的如setTimeout函数、ajax请求等等。示例: for (var i = 1; i <= 3; i++) {setTimeout(functi...2015-10-23
- 这篇文章主要介绍了JS中split()用法(将字符串按指定符号分割成数组)的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下...2016-10-25
- 这篇文章主要为大家分享了Bootstrap教程JS插件滚动监听学习笔记,内容很详细,感兴趣的小伙伴们可以参考一下...2016-05-20
- v-for标签可以用来遍历数组,将数组的每一个值绑定到相应的视图元素中去,下面这篇文章主要给大家介绍了关于在Vue.js中轻松解决v-for执行出错的三个方案,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。...2017-06-15