【原理】理解JavaScript中的上下文-对象字面量

简介: 【原理】理解JavaScript中的上下文-对象字面量

在JavaScript中,“context”指的是一个对象。在一个对象中,关键字“this”指向该对象,并提供了一个指向作为该对象成员的属性和方法的接口。当函数被执行时,关键字“this”指向函数被执行的对象。

通常有这些场景来说明 this 的指向:

  • 当函数在全局上下文中执行时,“this”指的是全局或“window”对象
  • 当一个函数是一个对象的方法时,“this”指的是那个对象(除非它是在另一个对象的上下文中手动执行的)
  • 当一个函数在另一个函数内部执行时(无论嵌套有多深)“this”指的是执行该函数的上下文所在的对象
  • 实例对象内部实例化构造函数时“this”指的是实例对象

所以,如你所见,“this”很容易让你头疼。但是坚持住💪。

简而言之,在对象字面量中,你没有局部变量,你有对象的属性。在函数foo()中,我可以说" var drink = ' beer ';,对于一个叫做bar的对象,我会说bar.dink=“beer”。不同的是,“beer”“bar”的属性,而当函数执行时,局部变量是由“var”关键字定义的,不能被函数之外的任何人或任何东西看到。

为什么“this”在JavaScript中如此重要?

示例 1

drink = 'wine';
var foo = {
    drink: "beer",
    getDrink: function(){
        return drink;
    }    
};
console.log( foo.getDrink() ); // wine

在示例# 1中,我们首先创建一个名为“drink”的全局变量,并将其值赋值为“wine”

接下来,我们创建一个名为“foo”的对象字面量,其属性“drink”等于“beer”。还有一个方法getDrink简单地返回了“drink”但是为什么它返回“wine”而不是“beer”呢?这是因为在对象“foo”中,“drink”foo的属性,而不是变量

在函数内部,当引用一个变量时,JavaScript引擎搜索作用域链并返回它找到的第一个匹配项。

虽然这个函数在“foo”上下文中执行,但“foo”没有名为“drink”的变量。它有一个名为“drink”的属性,但没有变量。因此JavaScript引擎搜索作用域链的下一级。作用域链的下一层是全局对象,它包含一个名为“drink”的变量,因此返回该变量的值“wine”

示例 2

var drink = 'wine';
var foo = {
    drink: "beer",
    getDrink: function(){
        return this.drink; // 'this' refers to the object "foo"
    }    
};
console.log( foo.getDrink() ); // beer

在例2中,我们所做的唯一改变是,在分配给“getDrink”的匿名函数中,我们返回“this.drink”,而不是“drink”

这是一个重要的细节。当函数在对象的上下文中执行时,关键字“this”指向该对象。你可以通过使用“this”关键字来访问对象的任何属性,添加新的属性(例如this.Color = " blue "),并更改现有的(例如:this.drink=“juice")。

使用点表示法创建一个JavaScript对象字面量

示例 3

var drink = 'wine';
var foo = {};
foo.drink = "beer";
foo.getDrink = function(){
        return this.drink; // 'this' refers to the object "foo"
    };
console.log( foo.getDrink() ); // beer

在例3中,我们拥有与例2完全相同的功能。从JavaScript引擎的角度来看,我们实现了相同的目标,控制台输出也完全相同。

区别在于我们如何组织代码。在例2中,我们在创建对象字面量“foo”的同时创建了属性“drink”“getDrink”。这都是一种表达式。在例# 3中,我们首先创建了一个名为“foo”的空对象,然后使用点表示法逐个向对象添加属性。我只是想指出,从语法的角度来看,解决所有这些问题的方法不止一种。

对象字面量可以包含其他对象字面量,而那些对象有它们自己的上下文

示例 4

var drink = 'wine';
var foo = {};
foo.drink = "beer";
foo.getDrink = function(){
        return this.drink; // 'this' refers to the object "foo"
    };
foo.under21 = {};
foo.under21.drink = 'soda';
foo.under21.getDrink = function(){
        return this.drink; // 'this' refers to the object "foo.under21"
    };
console.log( foo.getDrink() ); // beer
console.log( foo.under21.getDrink() ); // soda

在例 4中,我们为“foo”添加了一个新属性,该属性也是另一个对象。一开始它是空的(例如foo.under21 ={}),然后添加两个属性。第一个属性是“drink”,它被赋值为“soda”。不要把它和属性“drink”混淆,它是在“foo”上下文中设置的,等于“beer”。在“foo.under21”的上下文中,“drink”等于“soda”

foo的第二个属性“foo.under21”有一个匿名的功能。这个匿名函数返回“this.drink”。在“foo.Under21"上下文中,"drink"等于"soda ",因此调用该函数返回"soda"

这个例子的重点是对象字面量的属性本身可以是对象,并且那些对象有它们自己的上下文。当函数在这些对象的上下文中执行时,“this”指的是对象。我知道这种对象嵌套是没有限制的

JavaScript的.call()和.apply()方法允许你动态地改变函数执行的上下文

示例 5

drink = 'wine';
var foo = {};
foo.drink = "beer";
foo.getDrink = function(){      
        return this.drink; // 'this' refers to the object "foo"
    };
foo.under21 = {};
foo.under21.drink = 'soda';
foo.under21.getDrink = function(){
       return foo.getDrink.call(); // execute foo.getDrink()                
    };
console.log( foo.getDrink() ); // beer
console.log( foo.under21.getDrink() ); // wine

好的,这里是额外的问题:在示例# 5中,为什么调用" foo.under21.getDrink() "返回的是" wine " ?

这是因为我们改变了该函数的内部工作方式。而不是简单地返回“this.drink。我们使用JavaScript的" .call() "方法,它允许你在另一个对象的上下文中执行任何函数。当你没有指定函数被“调用”的上下文时,它会在全局对象的上下文中执行。在全局上下文中,有一个名为“drink”的变量,它等于“wine”,因此返回“wine”

示例 6

drink = 'wine';
var foo = {};
foo.drink = "beer";
foo.getDrink = function(){      
        return this.drink; // 'this' refers to the object "foo"
    };
foo.under21 = {};
foo.under21.drink = 'soda';
foo.under21.getDrink = function(){
       return foo.getDrink.call(this); // execute foo.getDrink()                
    };
console.log( foo.getDrink() ); // beer
console.log( foo.under21.getDrink() ); // soda

在示例# 6中,返回" soda "是因为当我们使用JavaScript的" .call() "方法时,我们指定了函数将要在其中执行的上下文。在本例中,我们指定的上下文是“this”。“this”指的是“foo.under21”的上下文。“foo.Under21”有一个名为“drink”的属性,因此返回值“soda”

总结

我想指出的是,当你开始理解JavaScript对象字面量中的上下文概念时,必须意识到还有更多的内容需要考虑。JavaScript对象字面量可以有属性是对象,这些对象有它们自己的上下文。

在每种情况下,当函数在该上下文中执行时,在函数内部,“this”关键字指向函数的属性对象,因为函数是在该对象的上下文中执行的。通过使用JavaScript的" .call() "方法(或" .apply() "方法),可以通过这种方式改变函数执行的上下文,从而相应地改变" this "的指向。


相关文章
|
15天前
|
JavaScript 前端开发
JavaScript遍历数组和对象常用方法总结
以上代码展示了数组和对象的多种遍历方法。对于数组,使用了传统的 `for` 循环、`for...in` 和 ES6 的 `for...of` 进行遍历;对于对象,则通过 `for...in`、`Object.keys()`、`Object.values()` 和 `Object.entries()` 来获取键值对。`for...of` 循环适用于遍历具有迭代协议的数据结构,如数组、字符串等,而对象遍历则更多地依赖于 `Object` 方法来获取其属性集合。
JavaScript遍历数组和对象常用方法总结
|
25天前
|
JavaScript 前端开发 索引
JS遍历数组里数组下的对象,根据数组中对象的某些值,组合成新的数组对象
这篇文章介绍了如何在JavaScript中遍历数组里数组下的对象,并根据对象的某些属性值组合成一个新的数组对象。主要内容包括使用ES6的`for...of`循环来遍历数组对象,然后根据需要提取对象中的属性值,并将它们放入新的对象中,最终形成一个新的对象数组以供使用。
|
29天前
|
存储 前端开发 JavaScript
javascript 异常问题之为自定义异常提供丰富的上下文信息如何实现
javascript 异常问题之为自定义异常提供丰富的上下文信息如何实现
|
29天前
|
JSON JavaScript 前端开发
JavaScript实现字符串转json对象的方法
JavaScript实现字符串转json对象的方法
|
10天前
|
JavaScript 前端开发
JavaScript基础知识-枚举对象中的属性
关于JavaScript基础知识中如何枚举对象属性的介绍。
21 1
JavaScript基础知识-枚举对象中的属性
|
1天前
|
JavaScript 前端开发
JavaScript Boolean(布尔) 对象
Boolean(布尔)对象用于将非布尔值转换为布尔值(true 或者 false)。
20 8
|
11天前
|
JavaScript 前端开发
JavaScript基础知识-对象的基本操作
关于JavaScript对象基本操作的基础知识文章。
25 2
|
10天前
|
JavaScript 前端开发
JavaScript基础知识-对象字面量
文章介绍了JavaScript中对象字面量的创建和使用,包括基本语法、属性赋值以及如何在控制台输出对象属性。
21 0
JavaScript基础知识-对象字面量
|
12天前
|
JavaScript 前端开发 API
Javaweb之javascript的BOM对象的详细解析
BOM为Web开发提供了强大的API,允许开发者与浏览器进行深入的交互。合理使用BOM中的对象和方法,可以极大地增强Web应用的功能性和用户体验。需要注意的是,BOM的某些特征可能会在不同浏览器中表现不一致,因此在开发过程中需要进行仔细的测试和兼容性处理。通过掌握BOM,开发者能够制作出更丰富、更动态、更交互性的JavaWeb应用。
11 1
|
15天前
|
缓存 JavaScript 前端开发
[译] Vue.js 内部原理浅析
[译] Vue.js 内部原理浅析