js中this的“终极三问”

this是什么?
this 本质是一个绑定, 在函数被调用时建立。它的指向是完全由函数被调用的调用点来决定的。

function baz() {
console.log(this);//因为baz函数的调用点在全局作用域,所以this指向全局变量
}
baz();//这里就是baz函数的调用点

this 存在的意义
在函数体内部指代函数当前的运行环境。从而实现干净的 API 设计和更容易的复用。

this的使用

top-level scope
1) In browsers, the top-level scope is the global scope. This means that within the browser var something will define a new global variable.In Node.js this is different. The top-level scope is not the global scope; var something inside a Node.js module will be local to that module.
2) 但是在Node REPL下,与浏览器的行为保持一致(timers除外)
In browsers
var that = this;
setTimeout(function() {
console.log(this);//window
}, 0);
Node REPL
var that = this;
setTimeout(function() {
console.log(this);//Timeout {…}
}, 0);
setInterval 结果相同

严格模式下
指定的this不在被封装为对象,而且如果没有指定this,则this的值为undefined
sloppy mode
function foo() {
console.log(this);
}
foo.apply(“test”); //==>String {“test”}0: “t”1: “e”2: “s”3: “t”length: 4…[[PrimitiveValue]]: “test”
strict mode
function foo() {
“use strict”;
console.log(this);
}
foo.apply(“test”); //==>test

调用方法时没有明确对象,this指向全局对象
sloppy mode
In browsers,this指向window
console.log(this);//window
Node REPL, this指向global
console.log(this);//global
strict mode
In browsers,this指向window
“use strict”;
console.log(this);//window
Node REPL, this指向global
“use strict”;
console.log(this);//global

匿名函数执行时当前对象是全局对象
sloppy mode
In browsers,
(function() {
console.log(this);//window
})();
Node REPL
(function() {
console.log(this);//global
})();
strict mode
In browsers,
(function() {
“use strict”;
console.log(this);//undefined
})();
Node REPL
(function() {
“use strict”;
console.log(this);//undefined
})();

强制一个函数调用使用某个特定对象作为 this 绑定,而不在这个对象上放置一个函数引用属性 就 this 绑定的角度讲,call(..) 和 apply(..) 是完全一样的 call
function foo() {
console.log(this.a);
}
var obj = {
a: 2
};
foo.call(obj); //==>2 强制函数foo()的 this 指向 obj
apply
function foo() {
console.log(this.a);
}
var obj = {
a: 2
};
foo.apply(obj); //==>2 强制函数foo()的 this 指向 obj

bind 返回一个硬编码的新函数,它使用你指定的 this 环境来调用原本的函数
function foo(something) {
console.log(this.a, something);
return this.a + something;
}
var obj = {
a: 2
};
var a = 6;
var bar = foo.bind(obj);//使用obj作为this环境调用foo()
var b = bar(3); // 2 3
console.log(b); // 5
var test = bar.bind(window);//2 3
console.log(test(3)); // 5

传递 null 或 undefined 作为 call、apply 或 bind 的 this 绑定参数,那么这些值会被忽略掉。
sloppy mode
function foo() {
console.log(this);
}
var obj = {};
foo.call(null);//window or global
foo.apply(null);//window or global
var bar = foo.bind(null);
console.log(bar());//window or global
strict mode
“use strict”;
function foo() {
console.log(this);
}
var obj = {};
foo.call(null);//null
foo.apply(null);//null
var bar = foo.bind(null);
console.log(bar());//null

new
将新构建的对象被设置为函数调用的 this 绑定
function foo(a) {
console.log(this);
this.a = a;
}
var bar = new foo(2);//构建了一个新的对象(foo {a: 2})并把这个新对象作为 foo(..) 调用的 this
console.log(bar); //foo {a: 2}
console.log(bar.a); // 2

arrow functions
箭头函数从封闭它的(函数或全局)作用域采用 this 绑定
function foo() {
// 返回一个箭头函数
return (a) => { //箭头函数在词法上捕获 foo() 被调用时的 this(obj1)
// 这里的 `this` 是词法上从 `foo()` 采用的
console.log(this.a);
};
}
var obj1 = {
a: 2
};
var obj2 = {
a: 3
};
var bar = foo.call(obj1);
bar.call(obj2); //2

Refer:
https://github.com/CuiFi/You-Dont-Know-JS-CN
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据