美文网首页
js 中的this

js 中的this

作者: 施主画个猿 | 来源:发表于2018-02-02 17:36 被阅读0次

    首先js中函数的this在函数被调用时总是指向一个对象(this对象是在运行时基于函数的执行环境绑定的) 然后 它的指向大致有一下几种区分:

    一 作为对象的属性调用一个函数时this 指向这个对象

    window.name="window";
    var a={
        name:"xuxu",
        getName:function(){
            console.log(this.name);
        }
    }
    // xuxu
    a.getName();
    

    二 作为普通函数调用时,this指向全局变量

    window.name="window";
    var a={
        name:"xuxu",
        getName:function(){
            console.log(this.name);
        }
    }
    var b=a.getName;
    // window
    b();
    

    上面的b函数是由window对象调用的,因此指向了window
    var b=a.getName; 只是赋值,并没有调用函数

    三 构造器函数调用

    JavaScript中没有类,但是可以从构造器中创建对象,同时也提供了new运算符,使得构造器看起来更像一个类。除了宿主提供的一些内置函数,大部分JavaScript函数都可以当作构造器使用。构造器的外表跟普通函数一模一样,它们的区别在于被调用的方式。当用new运算符调用函数时,该函数总会返回一个对象,通常情况下,构造器里的this就指向返回的这个对象,见如下代码:

    var MyClass = function(){
        this.name = 'sven';
    };
    var obj = new MyClass();
     // 输出:sven
    alert ( obj.name );    
    

    1.注
    但用new调用构造器函数调用时,还要注意一个问题,如果构造器显式地返回了一个object类型的对象,那么此次运算结果最终会返回这个对象,而不是我们之前期待的:

    var MyClass = function(){
        this.name = 'sven';
        return {
        // 显式地返回一个对象 
           name: 'anne'
        }
    };
    var obj = new MyClass();
    // 输出:anne
    alert ( obj.name );     
    

    2.注
    如果构造器不显式地返回任何数据,或者是返回一个非对象类型的数据,就不会造成上述问题

    三 apply()或者call()方法调用

    Function类型有两个方法apply()和call()可以动态的指定this的指向,例如:

    var MyClass={
        name:'my',
        getName:function () {
            console.log(this.name)
        }
    };
    var AllClass={
        name:'all'
    };
    // my
    MyClass.getName();
    // all
    MyClass.getName.call(AllClass);
    

    相关文章

      网友评论

          本文标题:js 中的this

          本文链接:https://www.haomeiwen.com/subject/xemezxtx.html