this

  • this对象是在运行函数时基于函数的运行环境绑定的;全局环境中,this对象就是window,而当函数被作为某个对象的方法调用时,this就是那个对象(例如全局调用,函数就作为window的方法)
  • 在理解this对象前先统一下函数调用的写法func.call(context,p1,p2)this就是这个context
function funcAdd(a,b){
     console.log(a+b);
}
funcAdd.call(undefined,1,2);         //3
//浏览器的规则是如果你传的context是null或者undefined,那么window对象就是默认的context严格模式下默认 context是undefined),此时可简写为funcAdd.call(1,2); 
var obj = {
        name: "Asher",
        age: 3,
        show: function(){
                 console.log( this.name + ":" + this.age )
        }
};
obj.show.call(obj);            //Asher:3   这里的this就是obj对象
  • 以下代码分别输出什么
var john = { 
    firstName: "John" 
}
function func() { 
    alert(this.firstName + ": hi!");
}
john.sayHi = func;        //相当于给对象john添加了func方法
john.sayHi();             //弹出对话框  John:hi!,该语句相当于john.sayHi.call(john);john是当前的this
func();                  ////弹出window,全局调用;相当于func.call();
function func() { 
   alert(this);
}
function fn0(){
    function fn(){
        console.log(this);
    }
    fn();
}
fn0();           //window;fn()是全局调用
document.addEventListener('click', function(e){
    console.log(this);                //document,事件绑定时触发的DOM对象指向this
    setTimeout(function(){
        console.log(this);           //window;全局调用
    }, 200);
}, false);
var john = { 
  firstName: "John"; 
}
function func() { 
  alert( this.firstName );
}
func.call(john);           //弹出John,这里指定了john就是this
var john = { 
    firstName: "John",
    surname: "Smith"
}
function func(a, b) { 
      alert( this[a] + ' ' + this[b] );
}
func.call(john, 'firstName', 'surname');        
//弹出John Smith
//指定this和调用的对象为john,'firstName', 'surname'为传给func的实参
  • 以下代码有什问题,如何修改
var $btn = $('.btn');
    var module= {
            bind: function(){
                    $btn.on('click', function(){
                        console.log(this);             //当$btn发生点击事件时,this指向$btn这个DO对象
                            this.showMsg();
                    })
            },
            showMsg: function(){
                        console.log('饥人谷');
                    }
}
//修改后:
var $btn = $('.btn');
    var module= {
            bind: function(){
                       var $this = this;
                    $btn.on('click', function(){
                       console.log(this);
                       $this.showMsg();
                    })
            },
            showMsg: function(){
                        console.log('饥人谷');
                    }
}
  • 以下代码输出什么,为什么
var obj = {
        foo: function(){
              console.log(this)
        }
}
var bar = obj.foo;
obj.foo();                  //输出obj;相当于obj.foo.call(obj);this就是obj
bar();                      // 输出window;没有指定context,那么默认为undefined即window
  • 以下代码输出什么,为什么
function fn (){ console.log(this) }
function fn2(){}
var arr = [fn, fn2];
arr[0]();          //输出arr
//这里的arr[0]可以理解为arr.0,所以转换为arr.0.call(arr);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. apply、call 、bind有什么作用,什么区别? call ,apply的作用:调用一个函数,传入函数...
    Rising_suns阅读 403评论 0 0
  • 作业 this 相关问题 问题1: apply、call 有什么作用,什么区别apply()和call()函数都可...
    饥人谷_桶饭阅读 402评论 0 0
  • apply、call 、bind有什么作用,什么区别 apply:fn.apply( obj,])将fn函数里的t...
    邵志远阅读 544评论 0 0
  • apply、call 有什么作用,什么区别 使用call和apply方法,可以改变对象方法的运行环境。 call ...
    coolheadedY阅读 355评论 0 0
  • this 相关问题 apply、call 、bind有什么作用,什么区别这三个方法均可以改变调用函数的this指向...
    放风筝的小小马阅读 383评论 0 1