标签：inf xtend ati 产生 deepcopy 另一个 运算 attr 内存
今天学习的内容是JS面向对象编程，以下总结的所有内容都来自于阮一峰大大的网络日志，感兴趣的小朋友可以戳原链接
http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html
真，通俗易懂，同时上一次面试的第一道题（JS继承）也在我的脑海中逐渐立体起来。
JS，一门没有Class类的面向对象编程（OOP）语言，我的第一个问题是如何生成实例化对象？
假设我们有一个对象Cat，现在需要实例出一只具体的“猫”，很容易写出下面的代码：
1 var cat1 = {}; 2 cat1.name = "Tom"; 3 cat1.color = "black";
定义对象并给对象赋属性的这种写法就可以看作是 最原始的生成Cat实例对象 的方法。我们当然不会傻到需要多少个实例，就写多少这样类似的代码，于是我们可以继续写成这样：
1 function Cat(name, color){ 2 return { 3 name: name, 4 color: color 5 } 6 } 7 var cat1 = Cat("Tom", "black"); 8 var cat2 = Cat("Lucy", "white");
这显然是 调用函数 的写法，但是这样不行，看不出两个实例对象的联系？？（什么意思啊喂）
然后顺其自然的进入到 构造函数 的写法（补充一下对构造函数的定义：普通函数中使用this，对构造函数new一下，就可以产生实例对象啦~）
1 function Cat(name, color){ 2 this.name = name; 3 this.color = color; 4 } 5 var cat1 = new Cat("Tom", "black"); 6 var cat2 = new Cat("Lucy", "white");
说实话这种写法跟上面调用函数的有点像呢，但是构造函数有属性加持啊，这下可以通过“constructor”属性以及“instanceof”运算符查看两个实例对象的关系了，虽然我现在依然不知道干嘛要这样。
每一个实例化对象的constructor属性都是指向原型对象的！！！ // cat1.constructor == Cat => true
instanceof 同理咯 // cat1 instanceof Cat == true
但是构造函数里有恒定的属性或者方法会怎么样呢？通过每一次实例化构造函数，都会产出一个相同的属性或方法。假设程序中需要对原型对象多次实例化，这样就会产生占用内存的弊端，于是下一个方法又要出场了！！
prototype属性
1 function Cat(name, color){ 2 this.name = name; 3 this.color = color; 4 } 5 Cat.prototype.kind = "猫科动物"; 6 Cat.prototype.eat = function () { 7 alert(‘我喜欢吃杰瑞‘); 8 }
引入官方术语，每一个构造函数都有一个prototype属性，这个属性指向另一个对象，而实例对象会继承到这个对象上的属性和方法，只要把不变的属性以及方法绑定在这个对象上，它们就会指向同一个内存空间，你可以这样测试：
1 var cat1 = new Cat("Tom", "black"); 2 var cat2 = new Cat("Lucy", "white"); 3 console.log(cat1.eat == cat2.cat); // true
而纯粹使用构造函数的写法，这个时候控制台会输出 false ，说明它们实际指向不同的内存空间。
感觉不太常用就不再手动敲一遍啦~
接下来是 in 运算符的相关使用，想必大部分人都是很熟悉这块的，用来判断对象是否含有某个属性以及遍历属性。（但是上次我竟然没回答对，哎）
1 console.log(name in cat1); // true 2 3 for (var key in cat1) { 4 console.log("attr-"+ key + ":" + cat1[key]); 5 }
嗯，又深刻理解了一遍生成原型实例的四种方法！按照计算机语言的套路，完成了封装自然要讨论如何继承。
构造函数的五种继承方法
现在已经有Cat对象，新增父对象Animal，如何让Cat对象继承Animal对象？
1 function Cat(name, color){ //子对象 2 this.name = name; 3 this.color = color; 4 } 5 function Animal(species){ //父对象 6 this.species = "猫科动物"; 7 }
1 function Cat(name, color){ 2 Animal.apply(this, arguments); 3 this.name = name; 4 this.color = color; 5 }
1 Cat.prototype = new Animal(); 2 Cat.prototype.constructor = Cat; // 修改了Cat的prototype对象后，也会把该对象原本对Cat的指向修改成Animal， 此时需要手动重新把指向还原
但是！实例化对象也是要占用内存的不是，于是这种写法也是不被提倡的，于是有了下面的改进写法。
注意：以下所有修改了prototype对象的代码下面，都需要重新还原指向！！！
1 Cat.prototype = Animal.prototype; 2 Cat.prototype.constructor = Cat;
看起来蛮不错的写法，却会产生这样的问题：第一行代码执行完毕后，为了让Cat.prototype指向还原，于是我们写了第二行代码，万万没想到，第二行代码执行完毕后，Animal.prototype的指向也变成了Cat！！
并且后续对Cat.prototype的任何修改都会影响到Animal.prototype，这样显然是不合理的。
但是我们可以把第二种和第三种写法结合一下，产生下面这张写法：
1 function extend(child, parent){ 2 var f = function () {} 3 f.prototype = parent.prototype; 4 child.prototype = new f(); 5 child.prototype.constructor = child; 6 }
实例化空对象是几乎不占内存的，因此排除了上述两种写法的弊端。
1 function copyExtend(child, parent) { 2 var c = child.prototype; 3 var p = parent.prototype; 4 for (var key in p){ 5 c[key] = p[key]; 6 } 7 c.uber = p; 8 } 9 10 function Animal(){} 11 Animal.prototype.species = "猫科动物"; 12 13 //调用 14 copyExtend(Cat, Animal);
讲完构造函数的继承，接下来是 非构造函数的继承
其实普通函数的继承原理和构造函数还是类似的，主要也是利用prototype属性以及属性拷贝的方法。
重新定义两个对象：
var china = { // 父对象 nation: "中国"; } var doctor = { // 子对象 career: "医生" }
1、第一个方法：我们来定义一个object函数
function object(parent){ function f() {} f.prototype = parent; return new f(); }
var doctor = object(country);
doctor.career = "医生"
object() 的作用，我们都知道构造函数的prototype属性都是指向另一个对象的（实例对象是不存在这个属性的），第二句代码相当于把父对象强行设定为这个“另一个对象”。而实例化对象（new f()）会自动继承"另一个对象"的所有属性和方法，这个时候返回的实例对象实际已经具备父对象的属性和方法，再补充上子对象的属性不就刚好完成了对父对象的继承？非常巧妙。
2、第二个方法，依旧是拷贝属性，此处掠过浅拷贝的方法，直奔最完美答案——深拷贝
1 function deepCopy(child, parent){ 2 child = child || {}; 3 for (var key in parent) { 4 if (typeof(parent[key])) === ‘object‘) { // 判断属性是否是对象 5 child[key] = (parent[key].constructor === Array) ? [] : {}; // 判断属性对象是数组对象还是纯对象 6 deepCopy(child[key], parent[key]); // 递归拷贝 7 } else { 8 child[key] = parent[key]; 9 } 10 } 11 return child; 12 }
不同于浅拷贝，深拷贝后的子对象继承了父对象的属性以后，即使修改了继承自父对象的属性，也不会影响到原父对象属性的内容。
我们来测试一下：
1 china.city = ["北京", "上海", "深圳"]; // 新增一个父对象的对象属性 2 3 // 调用深拷贝方法 4 var doc = deepCopy(doctor, china); 5 doc.city.push("杭州"); 6 7 console.log(doc.city); // ["北京", "上海", "深圳", "杭州"] 8 console.log(china.city); // ["北京", "上海", "深圳"]
以上，关于JavaScript面向对象编程的一些比较入门的知识点有了比较深刻的认识。写博文实在是太累了~还是站在巨人的肩膀上，以后还是要多写多总结啊！！！
标签：inf xtend ati 产生 deepcopy 另一个 运算 attr 内存
原文地址：https://www.cnblogs.com/cherryones/p/9286789.html
