Javascript的原型和原型链

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


   实例化为对象时:



Javascript的原型和原型链_第1张图片



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



Javascript的原型和原型链_第2张图片



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



Javascript的原型和原型链_第3张图片



    <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的原型和原型链_第4张图片



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


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


   函数才有 prototype 属性



Javascript的原型和原型链_第5张图片



   对象没有 prototype 属性

Javascript的原型和原型链_第6张图片



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

Javascript的原型和原型链_第7张图片




   以实例一个对象为例:



Javascript的原型和原型链_第8张图片



Javascript的原型和原型链_第9张图片



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

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



Javascript的原型和原型链_第10张图片



    <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>


   代码中,window.Sum = Sum; 表示把构造函数挂载到 window 上。关于立即执行函数的标准写法,这里不再阐述,有兴趣的可以去拓展了解。

你可能感兴趣的:(javascript,原型模式,开发语言)