JS类的创建与继承

JavaScript024

JS类的创建与继承,第1张

JS中,类的创建方式与函数的创建方式相同,主要区别在于一般我们创建类时,类名的首字母需要大写,同时,我们可以再类的原型上添加公共属性和方法。创建例子如下:

    JS类的继承主要有6种方式:原型链继承、实例继承、组合继承、原型式继承、寄生继承、寄生组合继承

    创建空的子函数,再子函数的原型上执行构造函数,让子函数的原型上拥有构造函数的全部属性和方法(包括构造函数的原型上的方法和属性),继承实现方法如下:

优点: 1.简单,子类实例既是子类的实例也是父类的实例

            2.父类在原型上新增的方法和属性都能被子类获取到

缺点: 1.传参不方便,只能再继承的时候传递参数,无法在创建子类实例的时候传入参数

            2.无法实现多继承(一个子类继承多个父类)

            3.原型上的属性、方法被所有的实例共享

    创建子类函数,在函数内部直接调用构造函数,如果构造函数有参数在这里传参,继承实现方法如下:

优点: 1.传参方便,可以在创建实例时传参

            2.可以实现多继承

缺点: 1.无法继承父类原型上的属性和方法 

            2.因为原型上没有方法,所以无法实现函数复用

        同时使用构造继承和原型链继承。继承实现方法如下:

优点: 1.综合了构造继承和原型链继承的优点,并且去除他们的缺点,总体而言是一个比较好的继承方案

缺点: 1.因为同时使用了原型链继承和构造继承,很明显可以看出父类实例的属性被调用了两次,浪费内存

        创建一个函数传入要继承的父对象,内部创建空的子类函数,然后在子类函数外部将父对象赋值给子类函数的原型,再返回子类函数的new执行结果。继承实现方法如下:

        函数内调用原型式继承,赋值给一个对象,然后可以自定义增加它的一些属性和方法。继承实现方法如下:

        通过寄生方式,去掉父类的实例属性,在调用两次父类的构造的时候,就不会初始化两次实例方法或属性,避免的组合继承的缺点,也就是重新创建一个空的函数,将父类的原型拷贝给这个空函数,然后对子类函数执行这个空函数。继承实现方法如下:

优点:全身都是优点

缺点:实现复杂

第一种方式:js使用构造函数的继承。

缺点:无法继承父类的原型链。

第二种:使用原型链继承的方式

// 缺点:父类的属性为引用类型时候,子类实例众多使用,有一个修改,其它也会变成修改值

第三种 // 使用组合继承的方式。

解决了上面两种缺点。

今天小编要跟大家分享的文章是关于Javascript继承的常用4种方法。相信很多学习web前端开发技术的小伙伴在学习前端开发的javascript部分的时候,在面向对象的部分就很难走下去了,主要的原因还是逻辑更加复杂了,需要理解的内容比直观的开发布局难一点。

在面向对象编程里,封装和继承是比较重要的,这中间,继承是相对而言比较难理解的,因为javascript的继承方式比较多,也有不同的优缺点。今天小编为大家带来这篇文章就是来和大家一起说一说Javascript继承的常用4种方法,希望能够对你有所帮助。

1、原型链继承

核心:将父类的实例作为子类的原型

缺点:父类新增原型方法/原型属性,子类都能访问到,父类一变其它的都变了

2、构造继承

基本思想

借用构造函数的基本思想就是利用call或者apply把父类中通过this指定的属性和方法复制(借用)到子类创建的实例中。

因为this对象是在运行时基于函数的执行环境绑定的。也就是说,在全局中,this等于window,而当函数被作为某个对象的方法调用时,this等于那个对象。

call、apply方法可将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象。

所以,这个借用构造函数就是,new对象的时候(new创建的时候,this指向创建的这个实例),创建了一个新的实例对象,并且执行Parent里面的代码,而Parent里面用call调用了Person,也就是说把this指向改成了指向新的实例,所以就会把Person里面的this相关属性和方法赋值到新的实例上,而不是赋值到Person上面,所以所有实例中就拥有了父类定义的这些this的属性和方法。

因为属性是绑定到this上面的,所以调用的时候才赋到相应的实例中,各个实例的值就不会互相影响了。

核心:使用父类的构造函数来增强子类实例,等于是复制父类的实例属性给子类(没用到原型)

缺点:方法都在构造函数中定义,

只能继承父类的实例属性和方法,不能继承原型属性/方法,无法实现函数复用,每个子类都有父类实例函数的副本,影响性能

3、组合继承

组合继承(所有的实例都能拥有自己的属性,并且可以使用相同的方法,组合继承避免了原型链和借用构造函数的缺陷,结合了两个的优点,是最常用的继承方式)

核心:通过调用父类构造,继承父类的属性并保留传参的优点,然后再通过将父类实例作为子类原型,实现函数复用

缺点:调用了两次父类构造函数,生成了两份实例(子类实例将子类原型上的那份屏蔽了)

4、寄生组合继承

核心:通过寄生方式,砍掉父类的实例属性,这样,在调用两次父类的构造的时候,就不会初始化两次实例方法/属性,避免的组合继承的缺点

缺点:堪称完美,但实现较为复杂

以上就是小编今天为大家分享的关于web前端学习之Javascript继承的常用4种方法的文章,希望本篇文章能够对正在学习web前端技术的小伙伴们有所帮助。想要了解更多web前端知识记得关注北大青鸟web培训官网。

文章转载自公众号:前端研究所