导航菜单

Web前端学习入门:JS继承方式详解

广州前锋2011.7.26我想分享

在学习前锋的广州Web前端时,JS是每个Web前端工程师都需要掌握的技术。它涵盖了很多知识。众所周知,JS是一种基于原型链的语言,“继承”与“原型链”的概念密切相关。下面,前锋广州Web前端培训老师将向您介绍JS的六种常见继承方法。

1.原型链继承。

也就是说,使用原型让引用类型继承另一个引用类型的属性和方法。原型链继承的缺点是可以访问父类的新原型方法/原型属性子类,父类已经从另一个更改。

参考代码:

image.php?url=0MkAQzVstg

2.借用构造函数继承。

借用构造函数的主要思想是使用call或apply将父类中由此指定的属性和方法复制(借用)到子类创建的实例。缺点:1)只能继承父类的实例属性和方法,不能继承原型属性/方法; 2)无法实现构造函数的重用,每个子类都有父类实例函数的副本,影响性能,代码会臃肿。

参考代码:

image.php?url=0MkAQzrVqN

3.组合继承。

它结合了原型链继承和构造函数继承的优点。通过调用父类构造,继承父类的属性并保留传递的参数,然后通过使用父类实例作为子类原型来实现函数重用。缺点是父类中的实例属性和方法既存在于子类的实例中,也存在于子类的原型中,而只存在于内存占用中,因此当子类用于创建实例对象时,其原型将存在。两个相同的属性/方法。

参考代码:

image.php?url=0MkAQzHaMr

4.原型继承

通过父类原型和指向同一对象的子类原型,子类可以从父类的公共方法继承为自己的公共方法,并且不会初始化实例方法/属性两次。缺点是:1)继承多个实例的原型链的引用类型属性指向相同,存在篡改的可能性; 2)参数不能通过,不能实现多路复用。

参考代码:

image.php?url=0MkAQzcY86

5.寄生遗传

原型可用于基于现有对象创建对象,var B=

Object.create(A)将A对象作为原型并生成B对象。 B继承了A的所有属性和方法。这是目前最完美的继承方法!

参考代码:

image.php?url=0MkAQzV9Ri

6,继承ES6中的类

class关键字在ES6中引入。该类可以由extends关键字继承。静态方法也可用于定义类的静态方法。通过修改原型链来实现继承,这比ES5更加清晰和方便。应该注意的是,class关键字只是原型的语法糖,JS继承仍然基于原型。缺点:并非所有浏览器都支持class关键字!

收集报告投诉

在学习前锋的广州Web前端时,JS是每个Web前端工程师都需要掌握的技术。它涵盖了很多知识。众所周知,JS是一种基于原型链的语言,“继承”与“原型链”的概念密切相关。下面,前锋广州Web前端培训老师将向您介绍JS的六种常见继承方法。

1.原型链继承。

也就是说,使用原型让引用类型继承另一个引用类型的属性和方法。原型链继承的缺点是可以访问父类的新原型方法/原型属性子类,父类已经从另一个更改。

参考代码:

image.php?url=0MkAQzVstg

2.借用构造函数继承。

借用构造函数的主要思想是使用call或apply将父类中由此指定的属性和方法复制(借用)到子类创建的实例。缺点:1)只能继承父类的实例属性和方法,不能继承原型属性/方法; 2)无法实现构造函数的重用,每个子类都有父类实例函数的副本,影响性能,代码会臃肿。

参考代码:

image.php?url=0MkAQzrVqN

3.组合继承。

它结合了原型链继承和构造函数继承的优点。通过调用父类构造,继承父类的属性并保留传递的参数,然后通过使用父类实例作为子类原型来实现函数重用。缺点是父类中的实例属性和方法既存在于子类的实例中,也存在于子类的原型中,而只存在于内存占用中,因此当子类用于创建实例对象时,其原型将存在。两个相同的属性/方法。

参考代码:

image.php?url=0MkAQzHaMr

4.原型继承

通过父类原型和指向同一对象的子类原型,子类可以从父类的公共方法继承为自己的公共方法,并且不会初始化实例方法/属性两次。缺点是:1)继承多个实例的原型链的引用类型属性指向相同,存在篡改的可能性; 2)参数不能通过,不能实现多路复用。

参考代码:

image.php?url=0MkAQzcY86

5.寄生遗传

原型可用于基于现有对象创建对象,var B=

Object.create(A)将A对象作为原型并生成B对象。 B继承了A的所有属性和方法。这是目前最完美的继承方法!

参考代码:

image.php?url=0MkAQzV9Ri

6,继承ES6中的类

class关键字在ES6中引入。该类可以由extends关键字继承。静态方法也可用于定义类的静态方法。通过修改原型链来实现继承,这比ES5更加清晰和方便。应该注意的是,class关键字只是原型的语法糖,JS继承仍然基于原型。缺点:并非所有浏览器都支持class关键字!