javascript的this
前言
javascript 的 this 指向主要是依赖上下文对象决定,箭头函数例外。
默认绑定
在全局作用域下调用函数,函数的this
默认指向window
。
注意1:严格模式下,默认指向undefined
function test() {
console.log(this.a);
}
var a = 1;
test(); // 1
// 严格模式
function test() {
'use strict';
console.log(this.a);
}
var a = 1;
test(); // TypeEror 报错
注意2:全局作用域下 var
声明的变量会默认绑定到window
,而let
、const
声明的变量不会
let a = 1;
var b = 1;
window.a // undefined
window.b // 1
隐式绑定
当函数引用有上下文对象时,this
隐式绑定到这个上下文对象中。
function test() {
console.log(this.a);
}
var obj = {
a: 1,
test: test
}
var a = 2;
obj.test(); // 1
隐式丢失
function test() {
console.log(this.a);
}
var obj = {
a: 1,
test: test
}
var a = 2;
// 隐式丢失,this 应用默认绑定规则
var bar = obj.test;
bar() // 2
显式绑定
call
、apply
、bind
等显式改变this
指向。
注意:非严格模式下,call
、apply
、bind
等传入null
、undefined
会默认转为window
function test() {
console.log(this.a);
}
var obj = {
a: 1
}
var a = 2;
test(); // 2
test.call(obj); // 1
test.apply(obj); // 1
var bTest = test.bind(obj);
bTest(); // 1
注意2:多次使用bind
,this
只会指向第一次bind
的this
function test() {
console.log(this.a);
}
var obj1 = { a: 1 }
var obj2 = { a: 2 }
var obj3 = { a: 3 }
var bind1 = test.bind(obj1);
bind1(); // 1
var bind2 = bind1.bind(obj2);
bind2(); // 1
var bind3 = bind2.bind(obj3);
bind3(); // 1
内置函数改变this
指向
function test() {
console.log(this.a);
}
var obj = {
a: 1
}
var arr = [1, 2, 3];
arr.forEach(test, obj); // 打印 3 个 1
new 绑定
使用new
操作符会产生如下步骤:
- 创建一个新的空对象。
- 将新对象与构造函数的
prototype
相连。 - 新对象绑定带构造函数的
this
。 - 如果构造函数有返回值,且返回值是对象,则返回构造函数的返回值,否则返回新建的对象。
function create() {
let obj = new Object();
let constructor = [].shift.call(arguments);
// obj.__proto__ = constructor.prototype;
Object.setPrototypeOf(obj, constructor.prototype);
// 改变 this
let res = constructor.apply(obj, arguments);
const isObj = Object.prototype.toString.call(res) === '[object Object]';
return isObj ? result : obj;
}
箭头函数
箭头函数比较特殊,它有以下几个特点:
-
没有自身的
this
,在定义时默认绑定父级作用域的this
,即采用词法作用域绑定this
. -
没有原型
prototype
,无法使用 new 操作符,即不能作为构造函数. -
无法使用
call
、apply
、bind
等显式改变其this
.const test = () => console.log(this); let obj = {}; test(); // window test.call(obj); // window const foo = test.bind(obj); foo(); // window