美文网首页
04 JS 中的 this 对象

04 JS 中的 this 对象

作者: Android_小生 | 来源:发表于2019-07-16 10:43 被阅读0次

1.通常情况下

this 对象是在运行时基于函数的执行环境绑定的。在全局函数中,this 等于 Window;而当函数被作为某个对象的方法调用时,this 等于那个对象。”

// 代码示例 1
function myContext() {
    console.log(this);
}
myContext();
// Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

let obj1 = {
    name: 'obj1',
    myContext: function() {
        console.log(this);
    }
}
obj1.myContext();
// {name: "obj1", myContext: ƒ}

2.匿名函数中

匿名函数的执行环境具有全局性,因此其 this 对象通常指向 Window

// 代码示例 2
var obj = {
    name: 'obj',
    myContext: function() {
        return function() {
            console.log(this);
        }
    }
}
obj.myContext()();
// Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

3.闭包访问

闭包(匿名函数)情况下,如果想访问作用域中的 arguments 对象,必须将该对象的引用保存到另一个闭包能够访问的变量中。

// 代码示例 3
var name = 'window';
var obj = {
    name: 'obj',
    myContext: function() {
        return function() {
            console.log(this.name);
        }
    }
}
obj.myContext()();
// window

var obj = {
    name: 'obj',
    myContext: function() {
        var that = this;
        return function() {
            console.log(that.name);
        }
    }
}
obj.myContext()();
// obj

4.特殊情况

// 代码示例 4
var name = 'The Window';

var obj = {
    name: 'obj',
    getName: function() {
        console.log(this.name);
    }
}
obj.getName();
// obj

(obj.getName = obj.getName)();
// The Window

上述代码示例 4 中两次执行结果不同。第二次执行的代码先执行了一条赋值语句,然后再调用赋值后的结果。因为这个赋值表达式的值是函数本身,所以 this 的值不能得到维持。???????????????

总结

一般情况下,this 对象的指向是由当前执行环境决定的。而匿名函数(闭包)的执行环境具有全局性,所以如果想要访问作用域中的 arguments 对象,可以将该对象的引用保存到闭包可以访问到的变量中。

同时要注意,语法的细微变化,都可能意外改变 this 的指向。

注:文章参考总结自 《JavaScript 高级程序设计》(第 3 版)[美] Nicholas C.Zakas 著 第 182 页。

相关文章

  • 04 JS 中的 this 对象

    1.通常情况下 “ this 对象是在运行时基于函数的执行环境绑定的。在全局函数中,this 等于 Window;...

  • addEventListener 第三个参数涉及到的事件捕获与冒

    2019-04-04-15:44:于公司 js中,我们可以给一个dom对象添加监听事件,函数就是 addEvent...

  • JS 对象

    JS对象 JS对象的意义和声明 在JS中,对象(OBJECT)是JS语言的核心概念,也是最重要的数据类型。在JS中...

  • js 对象和jquery对象的比较

    1、js 对象和jquery对象的区别 jquery对象是js中的new Object()生成的普通对象 2、js...

  • jQuery前端框架--笔记

    1,JS对象和jQuery对象的区别 jQuery就是JS中的new Object生成的普通对象。 2,JS对象和...

  • Day6 js基础2

    01.js引入方式和打印方式 02.函数 03.数组 04.对象 05.常用对象和函数 06.js简单演示 07....

  • JavaScript简介

    2019-04-17 js是嵌入Web页面中的基于对象和事件驱动的解释性的脚本语言 JavaScript的使用 嵌...

  • JavaScript中的Object对象

    JavaScript中的Object对象,是JS中所有对象的基类,也就是说JS中的所有对象都是由Object对象衍...

  • js中的this对象

    js中的this总会指向一个对象,具体是哪个对象就由运行时函数的执行环境而决定了。在实际应用中,this的常用指向...

  • js中的对象

    js中的对象理解和使用起来都很简单,并且很频繁的使用。但是,总有细节,是我们可能会忽略的、或者是拿捏不定的参考链接...

网友评论

      本文标题:04 JS 中的 this 对象

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