JS闭包问题(二)

作者: 前端王睿 | 来源:发表于2017-08-13 10:30 被阅读230次

在之前的JS闭包问题(一)文章中大概介绍了一下JS闭包,同时讲了闭包与变量之间的问题,今天我们继续聊闭包,聊聊闭包与this对象之间的问题。

我们知道,this指向当前对象,而在全局环境中,this就等于window对象,举个例子:

var name = "The Window";
var object = {
    name: "My Object",
    getName: function(){
        return this.name;
    }
}
alert(this);   // [object Window]
alert(this.name);    // "The Window"
alert(object.getName());     // "My Object"

上面例子很好理解,在全局环境中,name == window.name == this.name,而object.getName中的this指向object。

那么遇到闭包又会是什么样的结果呢?我们接着往下看:

var name = "The Window";
var object = {
    name: "My Object",
    getName: function(){
        return function(){
            return this.name;
        }
    }
}
alert(object.getName()());   // "The Window"

通常情况下,匿名函数的执行环境具有全局性,this对象指向window,所以上面例子中返回 "The Window"。但是,也存在例外的情况:

① 通过call()或者apply()改变函数的执行环境,这时this会指向其他对象

比如还是上面这个例子,只不过最后改成这样:

alert(object.getName().call(object));    // "My Object"

虽然还是执行同样一个匿名函数,但是执行环境却强制改成了object,这时的this就指向了object。

② 给HTML元素添加事件,这时匿名函数中的this会指向该事件所在元素

例如:

<input type="button" id="btn" value="点击我吧" />
var oBtn = document.getElementById("btn");
oBtn.onclick = function(){
    alert(this.value);   // "点击我吧"
}
oBtn.addEventListener('click',function(){
    alert(this.value);   // "点击我吧"
});

可以看出,不管哪种绑定事件方式,匿名函数中的this对象均指向oBtn。

总而言之,this对象是在运行时基于函数的执行环境绑定的。

相关文章

  • JS闭包问题(二)

    在之前的JS闭包问题(一)文章中大概介绍了一下JS闭包,同时讲了闭包与变量之间的问题,今天我们继续聊闭包,聊聊闭包...

  • JS闭包入门

    最近有看到朋友的面经里提到的JS闭包的问题,就想研究研究,以下是我对JS闭包的简单理解。 到底什么是JS闭包? 定...

  • 再谈JS闭包(JS闭包系列2)

    这篇文章,来继续谈谈Javascript闭包的剩余问题。因为在上一篇文章中关于JS闭包(JS闭包系列1)主要简单的...

  • php之闭包函数(Closure)

    php闭包函数(Closure) JS闭包 js和php闭包使用和区别

  • JS闭包

    JS闭包 闭包练习

  • js闭包问题

    javascript 闭包的概念,闭包的作用,闭包经典面试题详解(配图解) 函数作用域(闭包前置知识) 要彻底弄懂...

  • javascript复习笔记(2)

    闭包 网上讲闭包的文章一搜一大把。而且面试时,比较传统的问题都有很大几率提到闭包的问题。的确,闭包是js中一个很重...

  • 题目

    闭包是什么?闭包的优缺点 this的指向问题? js中的基本类型? (没有object!) typeof 判断类型...

  • JS闭包大结局(JS闭包系列3)

    在上一篇中再谈JS闭包(JS闭包系列2),我详细的介绍了JS中的变量作用域相关的概念,结合第一节关于JS闭包(JS...

  • JS闭包问题(一)

    之前我写过一篇JavaScript原型与原型链的文章,此属于JS中的重难点。 而闭包,是JS中除了原型链之外又一个...

网友评论

本文标题:JS闭包问题(二)

本文链接:https://www.haomeiwen.com/subject/lbnrrxtx.html