JavaScript 组件化开发之路（一）
JavaScript中的对象属性
深入了解JavaScript中的对象以及对象中的属性，是构建可复用组件的前提。
对象的创建方式，常用的有两种：
-
通过对象字面量创建
var obj = {x:1} -
通过构造函数创建
var obj = new Object()
我们可以用for-in来遍历并输出对象的属性。
var obj = {
x: 1,
y: 2,
vars:['a','b','c'],
add: function(){return this.x+this.y}
}
for(var prop in obj){
console.log(prop)
}
//输出 x, y, vars,add
在组件的开发中，我们经常要用到对象的继承，现在我们创建一个对象，它继承自obj，用es5里的方法，可以很容易的实现
var obj2 = Object.create(obj)
for(var prop in obj2){
console.log(prop)
}
//输出 x, y, vars,add
可以看到，obj2并没有自己的实例属性，但是，我们用for-in仍然可以得到三个属性。这三个属性继承自obj。 由于es5的这个方法并没有得到所有浏览器的支持，我们需要尝试自己实现对象的继承，去更加深入的了解继承的原理。
var inherit = function(obj){
function F(){}
F.prototype = obj
return new F()
}
var obj3 = inherit(obj)
for(var prop in obj3){
console.log(prop)
}
//x, y, vars,add
看上去不错，我们也实现了所谓的继承，但是觉得似乎哪里有点不对劲？我们再创建一个对象试试
var obj4 = inherit(obj)
for(var prop in obj4){
console.log(prop)
}
//x,y.vars,add
我们试着操作obj3的属性
obj3.x=0 console.log(obj3.x) //0 console.log(obj4.x) //1
貌似没什么问题，继续
obj.vars.push('d')
console.log(obj3.vars) //["a", "b", "c", "d"]
console.log(obj4.vars) //["a", "b", "c", "d"]
出大事了。对一个对象的修改，影响到了另外一个对象。组件设计中，如果一个组件的修改，会影响到同类的其它实例，那还有什么独立性可言？ 发生这种结果的原因， 就在我们实现的inherit方法中。在这个实现继承的方法中，我们首先创建了一个新的构造函数。这个构造函数的prototype指向了我们要继承的对象。因此，下面调用这个构造函数产生的对象，原型就是obj。当我们调用obj3.vars时，obj3本身并没有vars这个属性，于是它顺着原型链向上查找，在obj中找到了vars这个属性。这个属性的值是一个数组，数组属于引用类型，也就是说obj.vars属性中保存的只是一个指针（地址）。我们对obj3.vars得到的也是这个指针。针对这个指针指向的数组，进行了push操作，结果就是改变了这个指针指向的数组的值。当我们读取obj4的vars属性时，由于obj4本身也没有这个属性，它也会顺着原型链向上查找，找到obj.vars，而这时的obj.vars指向的数组已经被obj3的操作改变了。
这种继承方式显然无法满足我们的需求。我们希望每个继承而来的对象，在享有共有属性和方法的同时，也有自己私有的一些属性和方法。这些私有的属性不应该被共享，也不可以被别的对象修改。
下面是另一个实现继承的方式
var myClass = function(){
this.vars = ['a','b','c']
this.x = 1
}
myClass.prototype.y=1
myClass.prototype.say=function(){console.log('hi')}
myClass.prototype.publicArr=[1,2,3]
var my1 = new myClass
var my2 = new myClass
my1.vars.push('d')
console.log(my1.vars) // ['a','b','c','d']
console.log(my2.vars) // ['a','b','c']
我们把每个对象的私有属性，定义在构造函数内部，而把那些需要共同享用的属性，放在构造函数的prototype属性中。这样，当我们创建对象时，每个对象都会拥有自己的私有属性（vars,x）,也可以通过原型链，查找到原型中的属性。
console.log(my1.y) //1 my1.say() //'hi' console.log(my2.y) //2 my2.say() //'hi' //共享的属性，可以被其它的对象改变 my1.publicArr.push(4) console.log(my1.publicArr) //[1, 2, 3, 4] console.log(my2.publicArr) //[1, 2, 3, 4]
