33.this

问答

1.apply、call 有什么作用，什么区别

关键句：this指的是调用函数的那个对象。
apply,call都可以设置函数执行环境（就是所处执行环境，传入对象直接替代window的环境），这是设置this值的作用。
区别：
两者的参数设置不一样，在call中第一个参数是设置this的值，而如果该函数如含有若干个参数，就以参数列表的形式去写入，如：

var obj={
        name:'xiaoming',
        fn:function(name,age){
            this.name=name;
            this.age=age;
            console.log(this);
        }
    }
    var fn2=obj.fn;
    fn2.call(obj,'xiaohong','20');
    console.log(obj);

Paste_Image.png

apply同样的第一个参数是设置this的值，但想将参数传入的写法则是以一个参数数组的方式写入。

var obj={
        name:'xiaoming',
        fn:function(name,age){
            this.name=name;
            this.age=age;
            console.log(this);
        }
    }
    var fn2=obj.fn;
    fn2.apply(obj,['xiaohong',20]);
    console.log(obj);

Paste_Image.png

代码

1.以下代码输出什么?

var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func; //john对象里面设置属性sayHi，属性值为函数func
john.sayHi();   //弹出"John: hi!"，因为是john对象调用func函数，所以this指的是john

2.下面代码输出什么，为什么?

func()   // 弹出object window，等同于window.func();
function func() { 
  alert(this)
}

3.下面代码输出什么？

function fn0(){
    function fn(){
        console.log(this);
    }
    fn();
}
fn0();   //window  因为是window调用了fn0()函数

document.addEventListener('click', function(e){
    console.log(this);  // document DOM中谁绑定，this就是谁
    setTimeout(function(){
        console.log(this);  //setTimeout及setInterval里的this均指window
    }, 200);
}, false);

4.下面代码输出什么，why

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john)  //// alert("Jhon"),因为call的第一个参数就是设置this的指向。

5. 代码输出？

var john = { 
  firstName: "John",
  surname: "Smith"
}

function func(a, b) { 
  alert( this[a] + ' ' + this[b] )
}
func.call(john, 'firstName', 'surname') 
//alert( "Jhon  Smith");  因为this指代的是Jhon

6.以下代码有什么问题，如何修改

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this)   //this指的是$btn
      this.showMsg();  //由于$btn 没有showMsg方法
    })
  },
  
  showMsg: function(){
    console.log('饥人谷');
  }
}
//没有调用，因此，不会报错，也不会执行。

//修改  用一个变量保存this，此时this指的是module，然后在引入函数里面
var module= {
            bind: function(){
                var box=this; //这里this就指代的是module
                $btn.on('click', function(){
                    console.log(box); 
                    box.showMsg();
            })
        },
      
        showMsg: function(){
            console.log('饥人谷');
        }
    } 
module.bind();//需要调用才能执行

7.代码输出？

var leng = 3;
    function fa() {
      console.log(this.leng);
      console.log(this);
    }

    var obj = {
      length: 2,
      doSome: function (fn) {
        fn();
        console.log(arguments);
        arguments.leng  = 123;  //类数组上绑定属性leng和值
        arguments[0]();
        console.log( arguments.length );
      }
    }

    obj.doSome(fa)

Paste_Image.png

1.执行obj.doSome(fa)时，fa()这个函数作为参数传入doSome中, 因此执行fn()就是执行fa()。而fa()是在window环境下执行的，我们定义了var length = 3，所以输出3。
2.arguments是函数内参数的列表（是一个类数组对象，存了传入函数的参数），因此arguments[0]()，就相当于执行arguments.fa()。此时fa()的this是arguments对象

参考