what's this

问答

1、apply、call 有什么作用,什么区别

apply和call的
作用:都是为了改变函数内部的this指向
区别:fn.call(this,arg1,arg2,arg3......)
fn.apply(this,argumentsArray)
call是单个单个传入的,apply是用数组Array的形式传入的参数。


代码

1、以下代码输出什么?

var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi() 

alert

这里john.sayHi = func意味着让window调用了这个函数对象,然后执行john.sayHi()自然可以取到var john = { firstName: "John" }所定义的参数了。


2、下面代码输出什么,为什么

func() 

function func() { 
  alert(this)
}
object-window.png

因为这是window调用的函数func,所以对象是window


3、下面代码输出什么

function fn0(){
    function fn(){
        console.log(this);//window
    }
    fn();
}

fn0();//这里由全局调用函数,所以this是window


document.addEventListener('click', function(e){
    console.log(this);//document,这里的this指向的就是addEventListener的对象,也就是document
    setTimeout(function(){
        console.log(this);//window
    }, 200);
}, false);

setTimeout、setInterval这两个方法执行函数对象调用的一定是全局对象

win-doc-win.png


4、下面代码输出什么,why

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john) 

用了.call()的方法,括号内传入的就是this,这里指定了是Jhon,所以alert的结果是Jhon

Jhon.png

5、代码输出?

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

function func(a, b) { 
  alert( this[a] + ' ' + this[b] )
}
func.call(john, 'firstName', 'surname') 

涉及到.call(this,argument1,argument2,...)的使用,这里传入对象this是john,然后参数分别是firstNamesurname

Jhon Smith.png


6、以下代码有什么问题,如何修改

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this) //this指什么,这里this就是指触发事件的本身$btn
      this.showMsg();
    })
  },
  
  showMsg: function(){
    console.log('饥人谷');
  }
}

修改之后

<body>
<div id="btn">aaa</div>
<script>
    var $btn = $('#btn');
    var module = {
        bind: function () {
            var _this = this; //这里是关键保存住window的this
            $btn.on('click', function () {
                console.log(this); 
                _this.showMsg();//这里用了window.this
            })
        },
        showMsg: function () {
            console.log('饥人谷');//这里如果用$btn的this将无法调用
        }
    }
    module.bind();
</script>
</body>
呃...this gonna be happend
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、apply、call 有什么作用,什么区别? 1.二者都属于function.prototype的一个方法,以...
    咩咩咩1024阅读 252评论 0 0
  • What's this? 由于运行期绑定的特性,JavaScript 中的 this 含义非常多,它可以是全局对象...
    yuhuan121阅读 479评论 0 0
  • 目录1.this究竟是什么2.绑定this的方法3.caller、arguments和callee 1.this究...
    犯迷糊的小羊阅读 688评论 0 0
  • What's this? 由于运行期绑定的特性,JavaScript 中的 this 含义非常多,它可以是全局对象...
    cce117b0a0ce阅读 341评论 0 0
  • 作为函数调用 在函数被直接调用时this绑定到全局对象。在浏览器中,window 就是该全局对象 作为内部函数 函...
    盖被吹空调阅读 384评论 0 1