当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 前端关于this

前端关于this

2018年07月31日  | 移动技术网IT编程  | 我要评论

1>对于有经验得JavaScript开发者来说this也是一个非常难以理解的复杂机制，在此简单分析一下

      this的指向在函数的定义的时候是确定不了的，只有在函数执行的时候才能确定指向谁，实际上this最终指向的是调用他的那个对象(运行时)

2>搞清楚js里面，函数的集中调用方法

  1. 普通函数调用
  2. 作为方法调用
  3. 作为构造函数调用
  4. 使用apply/call方法调用
  5. function.prototype.bind调用
  6. es6箭头函数调用

 总结：谁调用了这个函数或者方法this关键字就是指向谁的

 

 

 

分情况讨论

1>普通函数调用

function sayName() {
    this.name='kobe';
    console.log(this);
    console.log(this.name);
}
sayName();   //window  kobe

这段代码sayName函数作为普通函数调用，实际上作为全局对象Window的一个方法调用的，window.sayName();

 

2>方法调用

var name='kobe';
var person={
    name:'james',
    sayName:function () {
        console.log(this.name);
    }
}

person.sayName();

var person1=person.sayName;
person1();

3>构造函数调用

function  Person(name){
        this.name=name;
    }
    var personA=Person("xl");   
    console.log(personA.name); // 输出  undefined
    console.log(window.name);//输出  xl
    //上面代码没有进行new操作，相当于window对象调用Person("xl")方法，那么this指向window对象，并进行赋值操作window.name="xl".
    
    var personB=new Person("xl");
    console.log(personB.name);// 输出 xl
    //这部分代码的解释见下

4>apply/ca调用

apply和call方法可用来代替另一个对象调用一个方法，call方法可将一个函数的对象上下文从初始的上下文改变为指定为新的对象，不同的是就是两个方法的参数是不一样的

var obj={
    x:3,
    show:function () {
        console.log('method is called:'+this.x);
    }
}

var obj2={x:4};
obj.show();
obj.show.apply(obj2);
obj.show.call(obj2);

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网