原型继承 – JavaScript 完全手册(2018版)

10年服务1亿前端开发工程师

小编推荐:掘金是一个面向程序员的高质量技术社区,从 一线大厂经验分享到前端开发最佳实践,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。

注:本文为 《 JavaScript 完全手册(2018版) 》第11节,你可以查看该手册的完整目录。

JavaScript 在流行的编程语言中非常独特,因为它使用了原型继承。 让我们找出这意味着什么。

虽然大多数面向对象的语言使用基于类的继承模型,但 JavaScript 基于原型继承模型。

这是什么意思呢?

每个 JavaScript 对象都有一个名为 prototype 的属性,它指向不同的对象。

这个不同的对象就是 对象原型

我们的对象使用该对象原型来继承属性和方法。

假设您使用对象字面量语法创建了一个对象:

const car = {}

或者使用 new Object() 语法创建:

const car = new Object()

在任何情况下,car 的 prototype(原型) 是 Object

如果初始化一个数组,数组其实也是一个对象:

const list = []
//or
const list = new Array()

这里 list 的 prototype(原型) 是 Array

您可以通过检查 __proto__ getter 来验证这一点:

car.__proto__ == Object.prototype //true
car.__proto__ == new Object().__proto__ //true
list.__proto__ == Object.prototype //false
list.__proto__ == Array.prototype //true
list.__proto__ == new Array().__proto__ //true

我在这里使用 __proto__ 属性,这是历史遗留的非标准的语法,但在现代浏览器中广泛实现。获得原型的更可靠方法是使用 Object.getPrototypeOf(new Object());例如:

const car = {}
const list = []

console.log(Object.getPrototypeOf(car));
console.log(Object.getPrototypeOf(list));

我们可以在控制台中看到,他们的 constructor 属性分别是 Object()Array();

原型中的所有属性和方法对于拥有原型的对象都是可用的:

Object.prototype 是所有对象的基本原型:

Array.prototype.__proto__ == Object.prototype //true

如果你想知道 Object.prototype 的原型是什么,那就没有原型。 这是一种特殊的,独一无二的的对象。(❄️)

您看到的上面的示例是工作中的原型链的示例。

我可以创建一个对象来扩展 Array 的对象,和任何我用它实例化的对象,在其原型链中将包含 ArrayObject,并从所有祖先继承属性和方法。

除了使用 new 运算符创建对象,或使用对象和数组的字面量语法之外,还可以使用 Object.create() 实例化对象。

传递的第一个参数是用作原型的对象:

const car = Object.create({})
const list = Object.create(Array)

您可以使用 isPrototypeOf() 方法检查对象的原型:

Array.isPrototypeOf(list) //true
Object.isPrototypeOf(list) //false

请注意,因为您可以使用以下方式实例化一个数组

const list = Object.create(Array.prototype)

在这种情况下,Array.isPrototypeOf(list)false,而 Array.prototype.isPrototypeOf(list)true

关于 JavaScript prototype(原型) 的相关知识,可以查看 JavaScript Prototype(原型) 新手指南 详细了解。


如果你觉得本文对你有帮助,那就请分享给更多的朋友
关注「前端干货精选」加星星,每天都能获取前端干货
赞(3) 打赏
未经允许不得转载:WEB前端开发 » 原型继承 – JavaScript 完全手册(2018版)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏