Javascript的原型和原型链

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


   实例化为对象时:



在这里插入图片描述



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



在这里插入图片描述



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



在这里插入图片描述



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


在这里插入图片描述



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


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


   函数才有 prototype 属性



在这里插入图片描述



   对象没有 prototype 属性

在这里插入图片描述



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

在这里插入图片描述




   以实例一个对象为例:



在这里插入图片描述



在这里插入图片描述



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

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



在这里插入图片描述



    <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 上。关于立即执行函数的标准写法,这里不再阐述,有兴趣的可以去拓展了解。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值