JavaScript之继承、this问题和对象枚举

本文探讨了JavaScript中多种继承实现方法,包括原型链式继承、借用构造函数、共享原型和圣杯模式,并分析了各自的优缺点。同时,深入解析了this的工作原理,通过实例展示了this指向的变化。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

继承

1、原型链式的继承

这种继承有一个缺点就是它会继承过多没有用的属性,造成大量浪费.

这里写图片描述

2、借用构造函数

这里写图片描述

但是这种方式有两个缺点:

  1. 严格说,这种方式不属于继承,也访问不了原型的原型
  2. 每次构造一个对象都要走两个构造函数,效率很低

3、共享原型

    Son.prototype = Foo.prototype;

但是这种方法也有弊端,那就是如果向单独改变子类原型上的属性时,就会两个一起都改变了。

4、圣杯模式

            var inherit = (function () {
                var f = function () {};
                return function (C, P) {
                    F.prototype = P.prototype;
                    C.prototype = new F();
                    C.prototype.constructor = C;
                    C.prototype.uber = P;
                }
            } ());

this问题

1、预编译过程中 this -> window

2、全局作用域里面 this -> window

3、call/apply可以改变this指向

4、obj.func() 里面的this指向obj(谁调用的指向谁)

下面看一下例题:

        var name = '222';
        var a = {
            name : '111',
            say : function () {
                console.log(this.name);
            }
        }

        var fun = a.say;
        fun();            // 输出222
        a.say();          // 输出111
        var b = {
            name : '333',
            say : function (fun) {
                func();
            }
        }

        b.say (a.say);    //输出222
        b.say = a.say;
        b.say();          //输出333

call和apply:

apply和call基本没有区别,都是改变this指向的作用,唯一的区别是call后面的参数是一个一个传的,而apply后面的参数是放进一个数组里面然后传进去的。

对象的枚举

1、obj[‘name’]

这种对象查看的方式和数组类似,我们常用的obj.name在底层也会默认转成这种形式的,所以我推荐尽量采用这种方式查看对象的属性。

2、for-in

for-in循环会按照属性的顺序取出属性名然后赋给prop,obj[prop]则是相应的属性的值。

注意:如果写成obj.prop的形式,因为在系统底层会转成obj[‘prop’]的形式,但是我们并没有prop这个属性,所以会打印出来undefined。

3、hasOwnProperty

值得注意的是,在ES3和ES5的非严格模式中,for-in循环会把原型上的属性一起打印出来,所以就需要我们用hasOwnProperty来进行判断。

            function Person () {
                this.name : 'zhagsan';
            }
            Person.prototype = {
                sex : 'male'
            }
            var oP = new Person();
            for (var prop in oP) {
                if (oP.hasOwnProperty(prop)) {
                    console.log(oP[prop]);
                }
            }

这样打印出来的数据就都是对象自身的属性了。

4、instanceof操作符

作用:判断前面对象的原型链上是否有后面构造对象

oP instanceof Person; // true
oP instanceof Object; // true
{} instanceof Object; // true
{} instanceof Person; // false

==主页传送门==

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值