原型与原型链

ch563
3,687 阅读4分钟

JavaScript 中，万物皆对象！但对象也是有区别的。分为普通对象和函数对象，Object ，Function 是JS自带的函数对象。

怎么区分？其实很简单，凡是通过 new Function() 创建的对象都是函数对象，其他的都是普通对象。Function Object 也都是通过 New Function()创建的。

构造函数

构造函数可用来创建特定类型的对象。像Object和Array这样的原生构造函数，在运行时会自动出现在执行环境中。

function Person() {

}
var person = new Person();
person.name = 'Kevin';
console.log(person.name) // Kevin

按照国际惯例，构造函数始终都应该以一个大写字母开头，而非构造函数则应该以一个小写字母开头。

要创建Person的新实例，必须使用new操作符。一般是经历以下四个步骤：

  • 1、创建一个新对象；
  • 2、将构造函数的作用域赋给新对象（此this的指向了这个新对象）
  • 3、为这新对象添加构造函数的属性
  • 4、返回新对象

上面例子中，person 就用有一个constructor （构造函数）属性，该属性是指向Person。

原型对象

无论什么时候，只要创建一个新函数，就会根据一组特定的规则为该函数创建一个prototype属性，这个属性指向函数的原型对象。普通对象没有 prototype，但有 __proto__ 属性。

如上面例子，Person.prototype 指向了原型象，而 Person.prototype.constructor 又指回了Person。

而 person 只是一个对象实例。

而person可以访问保存在原型中的值，但却不能重写原型中的值。如果我们在 person 中添加一个属性，而该属性与实例原型中的一个属性同名，那个person中的属性会暂时屏蔽原型中的属性，删除后，还是读回原型中的属性

function Person() {

}
Person.prototype.name = 'Perty';
var person = new Person();
person.name = 'Kevin';
console.log(person.name) // Kevin
delete person.name
console.log(person.name) // Perty

解析器的操作是：

  • “实例person有name属性吗？”
  • “有” —— 于是就读取实例中的name属性，输出 Kevin

删除后，再运行时：

  • “实例person有name属性吗？”
  • “没有”
  • “person的原型有name属性吗？”
  • “有” —— 于是就读取原型中的name的属性，输出 Perty

原型链

在创建对象（不论是普通对象还是函数对象）的时候，都有一个叫做 __proto__ 的内置属性，用于指向创建它的函数对象的原型对象 prototype。以上面的例子为例：

console.log(person.__proto__ === Person.prototype)  // true

同样的，Person.prototype 也同样有 proto 属性，它指向创建它的函数对象（Object）的prototype

console.log(Person.prototype === Object.prototype) // true

继续，Object.prototype对象也有__proto__属性，但它比较特殊，为null

console.log(Object.prototype.__proto__) // null

我们把这个有 __proto__ 串起来的直到 Object.prototype.__proto__ 为null的链叫做原型链。

person.__proto__ ==> Person.prototype.__proto__ ==> Object.prototype.__proto__ ==> null

最佳实例zepto

读过zepto的源码都了解到$其实是一个函数，同时在 $ 身上又挂了很多属性和方法。

以下代码：

<p id="p1">段落1</p>
<p id="p2">段落2</p>
<p id="p3">段落3</p>
<script type="text/javascript" src="js/zepto-1.1.6.js"></script>

$('p')返回的是类数组的一样东西。

我们先一步步来分析一下它究竟是不是数组：

var arr = [1,2,3];
var $p = $('p');

// 对比1
arr.__proto__.constructor === Array;  // true
$p.__proto__.constructor === Array;  // false

// 对比2
arr instanceof Array;  // true
$p instanceof Array;  // false

从原型指向中，可以看出$p真的只是类似数组一样的数组。而数组是没有addClass,removeClass等等的属性。

我们可以看console中，运行console.log($p.__proto__)，就可以看$p可调用的方法（这也是平时在使用zepto时，忘记api方法名时，可以即时查出来）

同理，我们查看数组下面的方法console.log(arr.__proto__)

可以看到在arr中是没有addClass,removeClass等等的属性的。

那我们也为arr创建一个addClass方法试试：

var arr = [1,2,3]
arr.__proto__ = {
    addClass: function () {
      console.log(123);
    }
};
arr.addClass();   // 123

此时我们再去拿arr来做第一次的那几个验证，得到的结果就和之前的$p一样了，即arr此时也称了一个不是数组的数组

这样就可以成功创建了addClass方法，而这个解析器的操作是：

  • 创建一个新的数组实例[1,2,3]
  • 新实例添加一个属性方法addClass

运行arr.addClass()时：

  • “实例arr有addClass属性吗？”
  • “有” —— 于是就读取实例中的addClass属性，输出 123

这里只是浅析zepto的基本设计，也是了解zepto设计原理的开始，想要更深入理解zepto，请移步zepto

avatar
文章
阅读
粉丝