js核心之原型链,前端最基础重要的知识,学好js必看

劣者初接触javascript的时候,觉得这玩意好奇葩啊。连个类都没有。只因劣者原先用c#习惯了。Javascript是动态的,本身不提供类的实现。(在ES2015/ES6中引入了class关键字,但只是语法糖,JavaScript 仍然是基于原型的)。

什么是原型?原型是一个对象,其他对象可以通过它实现属性继承。任何对象都可以是原型。任何对象在被创建之后也都会有一个默认原型,除了最顶端的那个原型。Javascript中最顶端的那个原型就是”Object。而这样金字塔式的结构就称为原型链。 JavaScript中几乎所有的对象都是位于原型链顶端的Object的实例。

我们通过一个实例来演示一下原型链。

js核心之原型链,前端最基础重要的知识,学好js必看

这里可以看到,先创建的对象a继承了Object,后创建的对象b继承了对象a。整个原型链是这样的:b--->a--->Object,Object后面就是null了,因为啥也找不到。

js核心之原型链,前端最基础重要的知识,学好js必看

JavaScript 并没有其他基于类的语言所定义的”方法。在 JavaScript 里,任何函数都可以添加到对象上作为对象的属性。函数的继承与其他的属性继承没有差别,当继承的函数被调用时,this 指向的是当前继承的对象,而不是继承的函数所在的原型对象。如果对象和原型都包含一个名叫add的方法,那么会调用当前对象的add方法,这叫”属性覆盖(这种情况相当于其他语言的方法重写)。我们来看一个实例。

js核心之原型链,前端最基础重要的知识,学好js必看

特别说明:

1. 数组都继承于Array.prototype(indexOf,forEach等方法都是从它继承而来)

2. 函数都继承于Function.prototype(call,bind等方法都是从它继承而来)

那么怎么来扩展一个原型呢,新增一个方法对象什么的,请看实例。

js核心之原型链,前端最基础重要的知识,学好js必看

在原型链上查找属性比较耗时,对性能有副作用,这在性能要求苛刻的情况下很重要。另外,试图访问不存在的属性时会遍历整个原型链。

遍历对象的属性时,原型链上的每个可枚举属性都会被枚举出来。

检测对象的属性是定义在自身上还是在原型链上,有必要使用 hasOwnProperty 方法,所有继承自 Object.proptotype 的对象都包含这个方法。

是 JavaScript 中唯一一个只涉及对象自身属性而不会遍历原型链的方法。

So:在用原型继承编写复杂代码前理解原型继承模型十分重要。同时,还要清楚代码中原型链的长度,并在必要时结束原型链,以避免可能存在的性能问题。此外,除非为了兼容新 JavaScript 特性,否则,永远不要扩展原生的对象原型。

每天学习一点,进步一点,坚持一个月将会是一个质的的飞跃,俗话说三个臭皮匠顶一个诸葛亮,大家的智慧总是大于一个人的智慧,想要比自己牛的人交流学习,欢迎进群:675498134

相关推荐