深入了解function.prototype

一、什么是function.prototype

在JavaScript中，每个函数都有一个属性叫做prototype，这个属性本质上是一个对象，在定义函数时自动创建。函数的prototype属性指向的是一个空对象（即Object对象的实例），这个空对象通常被称为“原型对象”。

当我们定义一个函数后，JavaScript会按照特定的规则自动为这个函数创建一个prototype对象，并将其赋值给该函数的prototype属性。也就是说，所有该函数产生的实例，都可以继承该prototype对象的属性和方法。

举个例子：

    
        function Person() {}
        Person.prototype.name = "Jack";
        Person.prototype.sayName = function() { console.log(this.name); };
        var person1 = new Person();
        person1.sayName(); // Jack

上述代码定义了一个空函数Person，然后为Person的prototype属性添加了name和sayName两个属性。接着通过new关键字创建了一个person1的实例。因为person1没有name属性，所以访问person1.sayName()时，this.name取的就是person1的原型对象Person.prototype的name属性。

二、原型链

在JavaScript中，我们可以通过对象的__proto__属性访问其构造函数的原型对象，在原型对象中可以继续访问到最顶层的Object原型对象。这样的一系列原型对象就构成了“原型链”，如下图所示：

在实际应用中，如果访问一个对象的某个属性或方法，首先会在该对象的实例中查找，如果没有找到，则会沿着原型链往上查找，直到最顶层的Object原型对象为止，如果还没有找到，则返回undefined。

三、构造函数、实例和原型

在JavaScript中，通过构造函数来创建对象实例是很常见的做法，但是如果我们直接在原型对象上添加属性或方法，有可能会出现共享的问题。例如：

    
        function Person() {}
        Person.prototype.friends = ["Alice", "Bob"];
        var person1 = new Person();
        var person2 = new Person();
        person1.friends.push("Cindy");
        console.log(person1.friends); // ["Alice", "Bob", "Cindy"]
        console.log(person2.friends); // ["Alice", "Bob", "Cindy"]

上述代码定义了一个空函数Person，然后为Person的prototype属性添加了friends属性。接着通过new关键字创建了person1和person2两个实例。然而，person1和person2共享了Person.prototype中的friends这个数组，导致person1操作friends数组后，person2也受到了影响。

为了避免这种问题，我们可以在构造函数中定义实例属性，实例属性在创建对象时会被赋值为新的数组，从而避免了实例之间的共享问题：

    
        function Person() {
            this.friends = ["Alice", "Bob"];
        }
        var person1 = new Person();
        var person2 = new Person();
        person1.friends.push("Cindy");
        console.log(person1.friends); // ["Alice", "Bob", "Cindy"]
        console.log(person2.friends); // ["Alice", "Bob"]

除了在构造函数中定义属性外，我们还可以在原型对象上定义“引用类型”（如数组、对象等）的属性，从而避免了实例之间的共享问题。

四、通过原型继承

在JavaScript中，由于函数和对象的本质相同，因此我们可以让一个函数“继承”另一个函数的prototype对象，从而在原型链上实现“继承”的效果。例如：

    
        function Animal() {}
        Animal.prototype.species = "动物";
        function Cat(name) {
            this.name = name;
        }
        Cat.prototype = new Animal();
        Cat.prototype.constructor = Cat;
        var cat1 = new Cat("小黑");
        console.log(cat1.species); // 动物

上述代码中，定义了一个空函数Animal，并在其prototype对象上定义了一个species属性。接着，定义了一个构造函数Cat，并将其prototype属性指向了一个Animal的实例。即使Cat本身没有定义species属性，但是在它的原型链上找得到，所以可以输出“动物”。

五、使用Object.create()创建对象

除了使用构造函数来创建对象外，还可以使用Object.create()方法来创建新的对象，并将其原型对象指定为另一个对象。例如：

    
        var Animal = {
            species: "动物"
        };
        var Cat = Object.create(Animal);
        Cat.name = "小黑";
        console.log(Cat.species); // 动物

上述代码中，首先定义了一个Animal对象，然后使用Object.create()方法创建了一个新的Cat对象，并将其原型对象指定为Animal。因此，Cat对象可以访问到Animal对象中的属性。

六、总结

通过本文的介绍，我们能够更加深入地了解function.prototype的作用、原型链、构造函数、实例和原型、通过原型实现继承以及使用Object.create()创建对象等方面的内容。在实际应用中，对于这些知识的掌握可以帮助我们更好地利用JavaScript的特性，进行高效的开发。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/270725.html