js中this的四种使用方法

0x00:js中this的四种调用模式

1,方法调用模式

2,函数调用模式

3,构造器调用模式 

4,apply、call、bind调用模式 

0x01:第一种:方法调用模式 (也就是用.调用的)this就是这个对象本身 

当一个函数被保存为对象的一个属性时,我们称它为一个方法,当一个方法被调用时,this被绑定到该对象,如果一个调用表达式包含一个属性表达式(即一个.点表达式或者[subscript]下标表达式)那么它被当做一个方法调用.

  1. var myObject = {
  2.    value:0;
  3.    increment:function(inc){
  4.        this.value + = typeof inc === 'number'?inc:1;
  5.    }
  6. }
  7. myObject.increment();
  8. document.writeln(myObject.value);//1
  9. myObject.increment(2);
  10. document.writen(myObject.value;)
方法可以使用this去访问对象,所以它能从对象中取得或修改该对象,this到对象的绑定发生在调用它的时候,这个超级“迟绑定”(very later binding)使用函数可以对this高度复用,通过this可取得它们所属对象的上下文的方法称为公共方法。  

0x02:第二种:函数调用模式 

当函数并非一个对象的属性时,那么它被当做一个函数来调用:

  1. var sum = add(3,4);
当函数以些模式调用时,this被绑定到全局对象,这是语言设计上的一个错误,如果语言设计正确,当内部函数被调用时,this应该仍然绑定到外部函数的this对象,这个错误设计的后果就是方法不能利用内部函数来帮助它工作,因为内部函数的this被绑定了错误的值,所以不能共享该方法对对象的访问权,有一个很容易的解决办法如果该方法定义一个变量并给它赋值为this,那么内部函数就可以通过这个变量来访问到this
  1. //给myObject增加一个double方法
  2. myObject.double = function(){
  3.    that = this;
  4.    var helper = function(){
  5.        that.value = add(that.value,that.value);
  6.    }
  7.    helper();以函数的形式来调用helper
  8. }
  9. //以方法的形式来调用double
  10. myObject.double();
  11. document.wtiten(myObject.getValue());//6


0x03:第三种:构造函数调用模式

  1. var Class = function(){
  2.    this.value = 100;
  3. }
  4. var class = new Class();
  5. console.log(class.value); //100

我们通过new关键字来调用构造函数,此时this会绑定在该新对象上(也就是这个实例对象上)


0x04:第四种:apply和call以及bind的调用模式:指定绑定对象 

  1. var myObject = {value:100};
  2. var foo = function(){
  3.    console.log(this);
  4. };
  5. foo(); //global
  6. foo.apply(myObject);//{value:100}
  7. foo.call(myObject);//{value:100}
  8. var newFoo = foo.bind(myObject);
  9. newFoo(); //{value:100}


apply()方法接受两个参数第一个是函数运行时的作用域,另一个是参数的数组(arguments)

call()方法第一个参数与apply是一样的,第二个参数需要一个个列举出来

call方法更接近我们平时调用函数,而apply需要我们传递 Array形式的数组做为参数,它们是可以相互转换的


原文地址:https://www.cnblogs.com/EvileOn/p/6029426.html