JavaScript踩坑笔记08---上下文、执行上下文、this
上下文、执行上下文:
往往会在某些JavaScript书籍、文章中看到“上下文”或“执行上下文”两词。
上下文的意思是语境,它指的是当前环境,仅仅只是当前。
代码的执行是需要环境的,这个环境包括变量、函数、表达式等一些因素。
举例说明。
var num1 = 1;
var num2 = 2;
var num3 = 3;
function fn(a, b) {
console.log(a + b);
}
fn(num1, num2); // 3
上述例子中,变量num1和num2就是函数fn的执行环境中的一部分,也就是我们所说的执行上下文,而变量num3则不是,因为缺少变量num3,函数fn照样可以执行。
为什么说仅仅是当前环境?
因为函数的执行上下文是会变的。
举例说明。
var num1 = 1;
var num2 = 2;
function fn(a, b) {
console.log(a + b);
}
function show() {
var num1 = 3;
var num2 = 4;
fn(num1, num2); // 7
}
show();
在上述例子中,函数fn在函数show中调用,函数show内部有变量num1和num2,函数fn因为调用的位置被改变,所以函数fn的执行上下文也被改变。
所以总结起来,函数的上下文是在函数执行时才会确定。
this:
在构造函数中,会经常见到“this.xxx=xxx;”的语句,this代指上下文。
使用new关键字创建一个实例的时候,经历了几个步骤。
- 创建一个新对象。
- 将构造函数的作用域赋给新对象(this指向了新对象,也就是当前的执行上下文被换成了新对象)。
- 为这个新对象的属性赋值。
- 返回新对象。
举例说明。
// 定义一个对象tom
var tom = {
name: "tom",
// 定义tom对象的方法say
say: function () {
console.log(this.name);
console.log(this === tom);
}
};
// 定义一个对象jack
var jack = {
name: "jack"
};
// 当前是tom调用方法say,所以上下文等于tom
tom.say();
// tom
// true
// 使用call函数,改变say方法的调用对象,此时是jack调用方法say,所以上下文不等于tom
tom.say.call(jack);
// jack
// false
个人学习总结,欢迎批评指正