原型、原型链与继承

2018-06-24 00:41:38来源：未知阅读 ()

面试中经常考到面向对象的一些知识，在这记录一下，如有不对欢迎指正，愿在前端的道路上共勉！

一、原型

1.什么是原型：简单说就像css的class一样，是公用的，给DOM元素加个class名就可以公用样式，那么原型就相当于css里面的class，都可以用。

　　　　　　　在构造函数创建出来的时候，系统会默认的帮构造函数创建并关联一个神秘的对象，这个对象就是原型，构造函数的每一个实例都可以访问原型中的成员(一般我们放方法)；

2.原型链：(原型链这个概念常考哦~) 首先呢，正如上面所说的，当函数被new操作符调用时，会创建出一个对象，并且该对象中会有一个指向其原型对象的秘密链接(一个非标准属性：_proto_)，这样新建的对象(实例)就可以调用相关原型对象中的成员；(咳咳，正题来了哈)但是，原型对象自身也具有对象固有的普遍特征(它也是个对象)，因此，也包含了指向其原型对象的链接，因此嘞，就形成了一个链式结构，称之为原型链；

　　　　请原谅我画画的技术：

二、继承

1.那么什么又是继承呢：其实就是一个对象没有的成员，但是另一个对象有，给它拿过用；(在现实世界中这好像叫‘借’吧)

2.继承的过程：(这里引用blue老师的一个比喻) 你媳妇他妈跟你要100万，你没有咋办？找你爹，你爹也没有，咋整？找你爹的爹，但是你爹的爹的爹死了，所以你爷爷说家里没有，也就是返回null；(其实写到这里我内心是崩溃的)

3.继承方式：

 1 //1.混入式继承，说是混入式有点高大上，其实就是遍历赋值
 2         function Person(){
 3 
 4         }
 5 
 6         let obj = { 
 7             name:'jack',
 8             age:'18',
 9             sayHello:function(){
10                 console.log('你好，我是'+this.name);
11             }};
12 
13         for( let k in obj){
14             //判断一下obj中的k是不是自己的，当然这不是咱们这篇文章主要研究的
15             if(obj.hasOwnProperty(k)){
16                 //这种不会破坏原型中的constructor的指向
17                 Person.prototype[k] = obj[k];
18             }
19         }
20 
21 
22 
23         //2.经典继承
24         Person.prototype = Object.create(obj);
25         
26         //上面的代码相当于
27         function create(obj){
28             function P(){};
29             P.prototype = obj;
30             return new P();
31         }    
32 
33 
34         //3.借用构造函数,这种方法继承不过去
35         function Person(name,age){
36             this.name = name;
37             this.age = age;
38         }
39 
40         Person.prototype.sayHello = function(){
41             console.log('你好，我是'+this.name);
42         }
43 
44         function Human(name,age){
45             Person.apply(this,arguments);
46         }
47 
48         let p = new Human('jack',18);
49         console.log(p); 
50         p.sayHello();  //p.sayHello is not a function
51 
52 
53 
54         //4.直接替换，会改变obj1的constructor的指向
55         obj1.prototype = obj2.prototype;