JavaScript 的对象继承方式，有几种写法？

gggggggbong 发布于2019-08-23 16:59 / 640人阅读

摘要：四混合方式对象冒充的主要问题是必须使用构造函数方式，这不是最好的选择。在中创建类的最好方式是用构造函数定义属性，用原型定义方法。注意，虽然代表了父类的构造函数，但是返回的是子类的实例，即内部的指的是，因此在这里相当于。

一、对象冒充

其原理如下：构造函数使用 this 关键字给所有属性和方法赋值（即采用类声明的构造函数方式）。因为构造函数只是一个函数，所以可使 Parent 构造函数成为 Children 的方法，然后调用它。Children 就会收到 Parent 的构造函数中定义的属性和方法。例如，用下面的方式定义 Parent 和 Children：

原理：就是把 Parent 构造函数放到 Children 构造函数里面执行一次。那为什么不直接执行，非要转个弯把 Parent 赋值给 Children 的 method 属性再执行呢？这跟 this 的指向有关，在函数内 this 是指向 window 的。当将 Parent 赋值给 Children 的 method 时, this 就指向了 Children 类的实例。

二、原型链继承

众所周知，JavaScript 是一门基于原型的语言，在 JavaScript 中 prototype 对象的任何属性和方法都被传递给那个类的所有实例。原型链利用这种功能来实现继承机制：

注意：调用 Parent 的构造函数，没有给它传递参数。这在原型链中是标准做法。要确保构造函数没有任何参数。

三、使用 call 或 applay 方法

这个方法是与对象冒充方法最相似的方法，因为它也是通过改变了 this 的指向而实现继承:

apply 方法本人就不举列了，它和 call 方法的区别在于它的第二个参数必须是数组。

四、混合方式

对象冒充的主要问题是必须使用构造函数方式，这不是最好的选择。不过如果使用原型链，就无法使用带参数的构造函数了。如何选择呢？答案很简单，两者都用。在 JavaScript 中创建类的最好方式是用构造函数定义属性，用原型定义方法。这种方式同样适用于继承机制：

五、使用 Object.create 方法

Object.create 方法会使用指定的原型对象及其属性去创建一个新的对象:

@ 当执行 Children.prototype = Object.create(Parent.prototype) 这个语句后，Children 的 constructor 就被改变为 Parent ,因此需要将 Children.prototype.constructor 重新指定为 Children 自身。

六、extends 关键字实现继承

这个是 ES6 的语法糖，下面看下es6实现继承的方法：

上面代码中，子类的constructor方法没有调用super之前，就使用this关键字，结果报错，而放在super方法之后就是正确的。子类Children的构造函数之中的super()，代表调用父类Parent的构造函数。这是必须的，否则 JavaScript 引擎会报错。

注意，super虽然代表了父类Parent的构造函数，但是返回的是子类Children的实例，即super内部的this指的是Children，因此super()在这里相当于Parent.prototype.constructor.call(this)。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103614.html

2017年前端面试题整理

摘要：函数内置不可变，在函数体内整个执行环境中为常量。这两个方法的用途都是在特定的作用域中调用函数，实际上等于设置函数体内的对象的值。控制表单控件的禁用状态。生成相对定位的元素，相对于其在普通流中的位置进行定位。 Javasript 1.请定义一个方法，传入一个string类型的参数，然后将string的每个字符间加个空格返回 spacify(hello world) // => h e l...

Muninn 2019-08-30 13:50 评论0 收藏0
2017年前端面试题整理

摘要：函数内置不可变，在函数体内整个执行环境中为常量。这两个方法的用途都是在特定的作用域中调用函数，实际上等于设置函数体内的对象的值。控制表单控件的禁用状态。生成相对定位的元素，相对于其在普通流中的位置进行定位。 Javasript 1.请定义一个方法，传入一个string类型的参数，然后将string的每个字符间加个空格返回 spacify(hello world) // => h e l...

Ashin 2019-08-21 17:12 评论0 收藏0
2017年前端面试题整理

摘要：函数内置不可变，在函数体内整个执行环境中为常量。这两个方法的用途都是在特定的作用域中调用函数，实际上等于设置函数体内的对象的值。控制表单控件的禁用状态。生成相对定位的元素，相对于其在普通流中的位置进行定位。 Javasript 1.请定义一个方法，传入一个string类型的参数，然后将string的每个字符间加个空格返回 spacify(hello world) // => h e l...

Caicloud 2019-08-01 17:49 评论0 收藏0
深入理解JavaScript

摘要：深入之继承的多种方式和优缺点深入系列第十五篇，讲解各种继承方式和优缺点。对于解释型语言例如来说，通过词法分析语法分析语法树，就可以开始解释执行了。 JavaScript深入之继承的多种方式和优缺点 JavaScript深入系列第十五篇，讲解JavaScript各种继承方式和优缺点。写在前面本文讲解JavaScript各种继承方式和优缺点。但是注意：这篇文章更像是笔记，哎，再让我...

myeveryheart 2019-08-22 13:46 评论0 收藏0
javascript中的面向对象

摘要：构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性，这种组合模式还支持向构造函数传递参数。实例对象都有自己的一份实例属性的副本，同时又共享对方法的引用，最大限度地节省了内存。而关键字则代表实例对象。相信大家对javascript中的面向对象写法都不陌生，那还记得有几种创建对象的写法吗？相信大家除了自己常写的都有点模糊了，那接下来就由我来帮大家回忆回忆吧！ 1. 构造函数...

SKYZACK 2019-08-20 15:26 评论0 收藏0