javascript基础-原型链与继承

深藏阁楼爱情的钟 2022-10-01 05:39 217阅读 0赞

我理解的继承，是为了解决代码重复浪费空间与编写精力的问题，如有两个对象，

// person1
    var person1={
        name:'tom',
        say(){
            console.log(this.name);
        }
    }
    
    // person2
    var person2={
        name:'jerry',
        say(){
            console.log(this.name);
        }
    }
    复制代码

这两个对象都有相同的`name`属性和`say()`方法，只是`name`属性值不同，造成了代码的重复浪费，因此提出了节省代码的方式：

### 工程模式 ###

function person(name){
        var obj=new Object();
        obj.name=name;
        obj.say=function(){
            console.log(obj.name);
        };
        return obj;
    }
    
    var person1=person("tom");
    var person2=person("jerry");
    复制代码

### 构造函数 ###

function Person(name){
        this.name=name;
        this.say=function(){
            console.log(this.name);
        };
    }
    var person1=new Person("tom");
    var person2=new Person("jerry");
    复制代码

其实两种方式大同小异，因为在使用new操作符来创建一个实例对象时，产生了以下4个步骤：

1.  新建一个对象:`var obj=new Object();`
2.  将构造函数中的`this`指向该对象，对该对象进行赋值`obj.name='name`
3.  **将该对象的`__proto__`指向构造函数的原型`obj.__proto__=Person.prototype`**
4.  返回该对象  
    其中1、2、4步就是工程模式中的步骤，只是多了第3步。

这两种产生对象的方法，虽然节省了代码的书写量，但在内存上仍然消耗相同的空间，每创建一个新的实例对象仍然要创建新的属性和方法。所以就有了原型。

### 原型 ###

（1）首先，js里所有的函数都有一个`prototype`属性，该属性是一个对象；同时js里面所有的对象(除去基本类型`number,string,boolean,null和undefined`之外的所有)都有一个`__proto__`属性，所以一个函数有`prototype`和`__proto__`两个属性，可以通过`console.dir(fn)`查看。

function Person(name){
        this.name=name;
    }
    console.dir(Person);
    复制代码

（2） `prototype`里有个构造器 `constructor`,指向的就是该构造函数，所有的对象都是由构造函数实例化得到的，现在我们来看一下刚才讲new操作符时的第3个步骤：

1.  **将该对象的`__proto__`指向构造函数的原型`obj.__proto__=Person.prototype`** 用图来表示就是：

因为所有的实例对象的 `__proto__`属性都指向构造函数的 `prototype`对象，所以可以把共享的方法写在 `prototype`里，这样只需要创建一个方法就可以了。

function Person(name){
        this.name=name;
    }
    Person.prototype.say=function(){
        console.log(this.name);
    }
    
    var p1=new Person("tom");
    p1.say();   // tom
    var p1=new Person("jerry");
    p1.say();   // jerry
    复制代码

### 原型链 ###

有了原型的概念，先给出原型链的概念：实例对象在使用属性或者调用方法时，如果自己没有，则会往上一级级查找`prototype`对象，直到找到为止，如果最终也找不到则报错，就拿上面讲的，p1自己没有say方法，但是原型对象里面有该方法，所以可以调用。

### 原型链继承 ###

有了原型链的概念，我们就可以实现继承了，即让子类构造函数的`prototype`指向父类的一个实例对象。这样通过原型链的查找就可以继承到父类的方法，我们通常需要继承的都是方法。

#### 实例方法、静态方法、原型方法和内部方法 ####

我们可以使用`console.dir(Person)`查看一下：

可以看到静态方法和原型方法，实例方法与内部方法看不到。  
其实这个问题是我在面试头条的时候暴露出来的，感谢面试小哥哥为我讲解，当时是有两个问题，怎么判断是数组，怎么让不是数组的元素调用splice方法，然后我就回答成了:

[1,2,3].isArray()
    Array.splice.call(obj)
    复制代码

完美搞错，真感谢那个面试小哥哥还耐心地给我讲解(捂脸羞愧)。  
其实打印以下构造函数`console,dir(Array)`就可以看到

`isArray`是静态方法， `splice`是原型方法，所以正确的应该是：

Array.isArray([1,2,3]);
    [].splice.call(obj); // []是Array的一个实例化对象
    复制代码

#### instanceof操作符 ####