js之原型及自定义插件

原型基本概念

• 原型（prototype）定义：原型是function对象的一个属性，它定义了构造函数制造出的对象的公共祖先，通过该构造函数产生的对象，可以继承该原型的属性和方法，原型也是对象

• 作用：给实例化对象设置公共的属性和方法

• 方法属性写在哪

• 方法尽量写在原型上，写在构造函数里的方法和属性实例化对象时会重新克隆一次，导致占用内存较高

• 需要配置的属性尽量写在构造函数上

• 只有构造函数才能对原型上的属性进行改动

Person.prototype.name = "人";
function Person() {}

var p = new Person();
console.log(p.name); // 人

原型链prototype chain

• 函数才有prototype属性，对象有__proto__、[[Prototype]]属性

• 原型链

• 原型链解决的主要是继承问题。每个对象拥有一个原型对象，通过proto指针指向其原型对象，并从中继承方法和属性，同时原型对象也可能拥有原型，这样一层一层，最终指向null（Object.prototype.__proto__指向的是null）。这种关系被称为原型链，通过原型链一个对象可以拥有定义在其他对象中的属性和方法

• js里万物皆对象，所以一直访问__proto__属性就会产生一条链条

• 链条的尽头是null

• 当js引擎查找对象的属性时，会先判断对象本身是否存在该属性，不存在就会沿着原型链往上找

function Car() {}
var car = new Car();
console.log(car);

类型检测方法

• typeof：判断基础数据类型，无法区分对象和数组

• instanceof：判断复杂数据类型，可以区分对象和数组。instanceof用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上，可以理解为是否为某个对象的实例

console.log(typeof 1); // number
console.log({} instanceof Object); // true

自定义插件

// 立即执行函数
(function () {
    // 声明一个构造函数
    function Sum() {}
    // 将公共方法写在原型上
    Sum.prototype.add = function (num1, num2) {
        return num1 + num2;
    };
    // 将构造函数挂载在window上
    window.Sum = Sum;
})();

console.log(new Sum().add(11, 3)); // 14