代码优雅原则（1）--复用复用复用！重要的是说多少遍都不嫌啰嗦。
当某个项目或模块中重复出现很多次某一段代码，这是不优美的。首先想到提取出来写成方法，js中提取出来做成插件才更炫酷。
简单的方法提取直接写成方法就足够了，有朋友会问了，既然提取方法就可以满足需求，写成插件做肾？除了装X还有什么意义？又是原型prototype又是闭包的搞那么花里胡哨的得不偿失了吧。
举个例子证明下为啥要下这么多功夫来封装插件：
我们有一堆功能都可以提取成函数，而这些功能又是各个模块都可以共用的，我们已经实现我们所需要的所有功能。并且把这些函数都写到一个js里面。如果是一个人在用，那么可以很清楚知道自己是否已经定义了什么，并且知道自己写了什么内容，我在哪个页面需要，那么就直接引入这个js文件就可以搞定了。
不过，如果是两个人以上的团队，或者你与别人一起协作写代码，这时候，另一个人并不知道你是否写了某某方法，这时他也定义了同样的某某方法。那么你们之间就会产生命名冲突，一般称之为变量的全局污染。（在此特别备注：js中全局变量慎用！慎用，极容易被暗改，极容易让简单的问题复杂化。）
解决全局污染的方式就是插件，把这些函数都封装起来，统一规范化命名。
接下来进入正题，先了解插件相关的知识储备，自己写出来的东西自己起码清晰透彻的理解是什么意思才能说是自己的。
重要概念：原型--prototype
写js自定义插件，原型必不可少。那么prototype的作用是什么？
那么又涉及到js的一些特性--在典型的面向对象的语言中，如java，都存在类（class）的概念，类就是对象的模板，对象就是类的实例。但是在Javascript语言体系中，是不存在类（Class）的概念的，javascript中不是基于‘类的'，而是通过构造函数（constructor）和原型链（prototype chains）实现的。
所有的实例对象都可以继承构造函数（constructor）中的属性和方法。但是，同一个对象实例之间，无法共享属性。
构造函数就不多说了，直接摘抄个实例看看prototype的作用吧：- console.log(boy.hobby===girl.hobby);
所以，构造函数的缺点就是：同一个构造函数的对象实例之间无法共享属性或方法。
为了解决构造函数的对象实例之间无法共享属性的缺点，js提供了prototype属性。
js中每个数据类型都是对象（除了null和undefined），而每个对象都继承自另外一个对象，后者称为“原型”（prototype）对象，只有null除外，它没有自己的原型对象。
原型对象上的所有属性和方法，都会被对象实例所共享。
通过构造函数生成对象实例时，会将对象实例的原型指向构造函数的prototype属性。每一个构造函数都有一个prototype属性，这个属性就是对象实例的原型对象。- console.log(boy.hobby===girl.hobby);
原型对象的属性不是对象实例的属性。对象实例的属性是继承自构造函数定义的属性，因为构造函数内部有一个this关键字来指向将要生成的对象实例。对象实例的属性，其实就是构造函数内部定义的属性。只要修改原型对象上的属性和方法，变动就会立刻体现在所有对象实例上。
上面代码中，当修改了原型对象的hobby方法之后，两个对象实例都发生了变化。这是因为对象实例其实是没有hobby方法，都是读取原型对象的hobby方法。也就是说，当某个对象实例没有该属性和方法时，就会到原型对象上去查找。如果实例对象自身有某个属性或方法，就不会去原型对象上查找。- console.log(boy.hobby());
- console.log(girl.hobby());
总结一下：
a：原型对象的作用，就是定义所有对象实例所共享的属性和方法。
b：prototype，对于构造函数来说，它是一个属性；对于对象实例来说，它是一个原型对象。
接下来摘抄一段原型链的相关概念：
对象的属性和方法，有可能是定义在自身，也有可能是定义在它的原型对象。由于原型对象本身对于对象实例来说也是对象，它也有自己的原型，所以形成了一条原型链（prototype chain）。比如，a对象是b对象的原型，b对象是c对象的原型，以此类推。所有一切的对象的原型顶端，都是Object.prototype，即Object构造函数的prototype属性指向的那个对象。
当然，Object.prototype对象也有自己的原型对象，那就是没有任何属性和方法的null对象，而null对象没有自己的原型。
1 console.log(Object.getPrototypeOf(Object.prototype)); //null
2 console.log(Person.prototype.isPrototypeOf(boy)) //true
原型链（prototype chain）的特点有：
a：读取对象的某个属性时，JavaScript引擎先寻找对象本身的属性，如果找不到，就到它的原型去找，如果还是找不到，就到原型的原型去找。如果直到最顶层的Object.prototype还是找不到，则返回undefined。
b：如果对象自身和它的原型，都定义了一个同名属性，那么优先读取对象自身的属性，这叫做“覆盖”（overiding）。
c：一级级向上在原型链寻找某个属性，对性能是有影响的。所寻找的属性在越上层的原型对象，对性能的影响越大。如果寻找某个不存在的属性，将会遍历整个原型链。
看概念可能比较晦涩，我们来看一个例子。但是理解了概念真的很重要。
上面代码中，定了一个数组arr，数组里面有三个元素。我们并没有给数组添加任何属性和方法，可是却在调用length，join()，valueOf()时，却不会报错。
length属性是继承自Array.prototype的，属于原型对象上的一个属性。join方法也是继承自Array.prototype的，属于原型对象上的一个方法。这两个方法是所有数组所共享的。当实例对象上没有这个length属性时，就会去原型对象查找。
valueOf方法是继承自Object.prototype的。首先，arr数组是没有valueOf方法的，所以就到原型对象Array.prototype查找。然后，发现Array.prototype对象上没有valueOf方法。最后，再到它的原型对象Object.prototype查找。
来看看Array.prototype对象和Object.prototype对象分别有什么属性和方法。- console.log(Object.getOwnPropertyNames(Array.prototype))
- //["length", "toSource", "toString", "toLocaleString", "join", "reverse", "sort", "push", "pop", "shift", "unshift", "splice", "concat", "slice", "lastIndexOf", "indexOf", "forEach", "map", "filter", "reduce", "reduceRight", "some", "every", "find", "findIndex", "copyWithin", "fill", "entries", "keys", "values", "includes", "constructor", "$set", "$remove"]
- console.log(Object.getOwnPropertyNames(Object.prototype))
- // ["toSource", "toString", "toLocaleString", "valueOf", "watch", "unwatch", "hasOwnProperty", "isPrototypeOf", "propertyIsEnumerable", "__defineGetter__", "__defineSetter__", "__lookupGetter__", "__lookupSetter__", "__proto__", "constructor"]
后面会开始一步一个脚印的写出优雅炫酷的自定义插件！
|
|
转播
