Javascript的原型和原型链-Toy模板网

这篇具有很好参考价值的文章主要介绍了Javascript的原型和原型链。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

原型是function对象的一个属性，它定义了构造函数制造出的对象的公共祖先，通过该构造函数产生的对象，可以继承该原型的属性和放法，因此原型也是对象。

实例化为对象时:

Javascript的原型和原型链

通过 .prototype 创建属性, 调用时，直接对象名.属性，就可以获取值。

Javascript的原型和原型链

原型的作用主要是给我们构造函数实例化出来的对象设置公共的属性或者方法使用的。方法写在原型上，写在构造函数里的方法和属性会重新克隆一次，会导致占用内存较高。需要配置的属性是写在构造函数上，只有构造函数才能对原型上的属性改动。

Javascript的原型和原型链

    <script>
        function Person() {
            this.name = '冯大少';
        };

        Person.prototype.name = '冯二少';
        Person.prototype.say = function() {
            console.log('hello');
        };

        var person1 = new Person();
        console.log(person1.name);
        person1.say();
    </script>

Javascript的原型和原型链

函数才有 prototype 属性,对象有 proto || [[prototype]] 属性。Javascript万物都是对象，所以一直访问 proto 属性就会产生一条链条，链条的尽头是null 。当js引擎查找对象的属性时，会先判断对象本身是否存在该属性，不存在的属性就会沿着原型链往上找。

原型链解决的主要是继承问题，每个对象拥有一个原型对象，通过 proto 指针指向其原型对象，并从中继承方法和属性，同时原型对象也可能拥有原型，这样一层一层，最终指向null(Object.proptotype.__proto__指向的是null)。这种关系被称为原型链(prototype chain)，通过原型链一个对象可以拥有定义在其他对象中的属性和方法。

函数才有 prototype 属性

Javascript的原型和原型链

对象没有 prototype 属性

Javascript的原型和原型链

打印空对象，返回 [[prototype]]，链条的尽头是null。

Javascript的原型和原型链

以实例一个对象为例：

Javascript的原型和原型链

最后，通过写一个对两个数字进行加法运算计算器，简单介绍插件化开发的应用。标准是要写在函数里，因为函数里声明的变量或者函数，对外界无影响。为了让函数在浏览器加载的时候执行，那么还要立即执行函数。

步骤
声明一个构造函数
将公共方法写在原型上
将构造函数挂载到window上
写一个立即执行函数

Javascript的原型和原型链

    <script>
        (function() {
            function Sum() {}
            Sum.prototype.add = function(num1, num2) {
                return num1 + num2;
            };
            window.Sum = Sum;

        })();

        var sum = new Sum();
        var a = sum.add(3, 3);
        console.log(a);
    </script>