docs: 批量博文

Chapter2 - Web FrontEnd/2.7.md

@@ -0,0 +1,94 @@
+# 原型继承
+
+JS中的继承跟其他面向对象语言的继承有点不太一样，要正确的了解JS中的继承还得了解JS的前世今生。
+
+#### 一、从JS的诞生之初说起
+要理解Javascript的设计思想还得从它的诞生说起。
+
+1994年网景公司（Netscape）发布了 Navigator 浏览器 0.9 版。这是历史上第一个比较成熟的网络浏览器，轰动一时，但是这个版本的浏览器只能用来浏览，不具备与访问者交互的能力。比如网页上有一个地方需要用户输入“用户名” ，当时浏览器无法判断访问者是否真的填写了，只有让服务器判断，如果没有填写，服务器就返回错误，这太浪费时间和服务器资源了。
+
+因此，网景公司需要一种网页脚本语言，使得浏览器可以与网页互动，工程师 Brendan Eich 负责开发这种新语言。他觉得没有必要设计的很复杂，这种语言只要能够完成一些简单的操作就足够了，比如判断用户有没有填写表单。
+
+1994年正是面向对象编程（OOP）最兴盛的时期，C++是当时最流行的语言，Java语言的1.0版即将在第二年推出，Sun 公司正在大肆造势。
+
+Brendan Eich 无疑收到了影响，JS里面所有的数据类型都是对象，这一点与Java非常相似，但是他随即遇到一个问题，到底要不要设计继承机制？
+
+#### 二、Brendan Eich的选择
+如果 真的是一种简易的脚本语言，其实不需要有“继承”机制，但是JS里面都是对象，必须有一种机制，将所有的对象都联系起来，所以他最后还是设计了“继承”。
+
+但是他没有引入“类”的概念，因为一旦有了“类”，JS就是一门完全面向对象的语言了，增加了初学者的难度，他考虑到 C++ 和 Java 都使用 new 命令，生成实例。
+
+C++ 写法
+
+ClassName *object = new ClassName(param);
+Java 写法
+
+Foo foo = new Foo();
+因此引入了 new 命令，用来从原型对象生成一个实例对象，但是JS没有“类”的概念，怎么表示原型对象？
+
+这时他想到 C++ 和 Java 都是使用 new 命令，会调用类的构造函数（constructor）。他就设计了一个简化版，在 JS 语言中，new 命令后跟的不是类，而是构造函数。
+
+举例来说，用狗的构造函数表示狗对象的原型。
+
+function Dog(name){
+    this.name = name;
+}
+对这个构造函数使用 new， 就会生成一个狗对象的实例。
+
+var dog1 = new Dog("阿拉斯加");
+console.log(dog1.name);    //阿拉斯加
+注意：构造函数中的 this 关键字，指向了新构建的实例对象。
+
+#### 三、new 运算符的缺点
+用构造函数生成的实例对象，有一个缺点就是无法共享属性和方法。
+
+比如，在Dog对象的构造函数中，设置一个实例对象的共有属性category
+
+function Dog(name){
+         this.name = name;
+     this.categey = "dog";
+}
+
+var dog1 = new Dog("阿拉斯加");
+var dog2 = new Dog("萨摩");
+
+console.log(dog1.category);         //dog
+console.log(dog2.category);         //dog
+
+dog1.category = "阿拉斯加";                  
+console.log(dog1.category);         //阿拉斯加
+console.log(dog2.category);         //dog
+这时候2个对象的category属性是独立的，修改其中一个，不会影响另一个。
+
+这样 的弊端就是每一个实例对象，都有自己的属性和方法的副本，无法做到数据的共享，对内存的极大浪费。
+
+#### 四、prototype 属性的引入
+考虑到这一点，Brendan Eich 决定为构造函数设置一个 prototype 属性。
+
+这个属性包含一个对象，所有的实例对象需要共享的属性和方法都保存在这个对象里面，那些不需要共享的属性和方法就放在构造函数里面。
+
+实例对象一旦创建，将自动引用 prototype 对象的属性和方法， 也就是说实例对象的属性和方法，分成两种，一种是自己（子类）的属性和方法，另一种是引用的（父类）。
+
+function Dog(name) {
+    this.name = name;
+}
+
+Dog.prototype.category = "dog";
+var dog1 = new Dog("阿拉斯加");
+var dog2 = new Dog("萨摩");
+console.log(dog1.category); //dog
+console.log(dog2.category); //dog
+dog1.category = "啸天犬";
+console.log(dog1.category); //啸天犬
+console.log(dog2.category); //dog
+dog1.__proto__.category = "啸天犬";
+console.log(dog1.category); //啸天犬
+console.log(dog2.category); //啸天犬
+现在 category 属性存放在 prototype 对象里面，被子类共享，只要修改 prototype 对象里面的 category 值，子类都会被改变。
+
+修改可以通过2种方法修改
+
+1、dog1.__proto__.category = "啸天犬";
+2、Dog.prototype.category = "啸天犬";
+五、总结
+由于所有的实例对象共享同一个 prototype 对象，那么外界看起来就是 prototype 对象就像是实例对象的原型， 而实例对象就好像继承了 prototype 对象一样。