Js类的构建与继承案例详解
更新时间:2021年9月15日 00:00 点击:1402
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 数组去重详解
相关文章
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签...2016-01-02
- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮,感兴趣的小伙伴们可以参考一下...2016-03-03
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-13
- 这篇文章主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-08-20
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 这篇文章主要介绍了node.js如何操作MySQL数据库,帮助大家更好的进行web开发,感兴趣的朋友可以了解下...2020-10-29
- 有时候我们需要屏蔽客户端的F12,以防菜鸟也可以随意修改我们的代码,也处于源码的保护等操作,这里就为大家分享一下常见的代码...2020-10-03
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
- 本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码,有需要的小伙伴可以参考下。...2016-01-20
- 这篇文章主要介绍了js实现文本框输入文字个数限制代码,文本框输入的文字个数并不是无限制的,一般都会限定一个输入最高上限,如何限制,请看本文...2015-12-27
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要介绍了JS创建Tag标签的方法,结合具体实例形式分析了javascript动态操作页面HTML元素实现tag标签功能的步骤与相关操作技巧,需要的朋友可以参考下...2017-06-15
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06