this绑定规则细节和面试题分析
this补充
setTimeout(function () {
console.log(this);
}, 2000);
// window
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f00;
}
</style>
</head>
<body>
<div class="box"></div>
<script src="./01-一些函数的this分析.js"></script>
</body>
</html>
const boxDiv = document.querySelector(".box");
boxDiv.onclick = function () {
console.log(this);
};
// <div class="box"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f00;
}
</style>
</head>
<body>
<div class="box"></div>
<script src="./01-一些函数的this分析.js"></script>
</body>
</html>
const boxDiv = document.querySelector(".box");
boxDiv.addEventListener("click", function () {
console.log(this);
});
boxDiv.addEventListener("click", function () {
console.log(this);
});
boxDiv.addEventListener("click", function () {
console.log(this);
});
// <div class="box"></div>
// <div class="box"></div>
// <div class="box"></div>
var names = ["abc", "cba", "nba"];
names.forEach(function (item) {
console.log(item, this);
});
// abc window
// cba window
// nba window
var names = ["abc", "cba", "nba"];
names.forEach(function (item) {
console.log(item, this);
}, "abc");
// abc String {"abc"}
// cba String {"abc"}
// nba String {"abc"}
this绑定规则优先级
优先级
- new绑定 > 显示绑定 > 隐式绑定 > 默认绑定
优先级-显式高于隐式绑定
var obj = {
name: "obj",
foo: function () {
console.log(this);
}
};
obj.foo();
obj.foo.call("abc");
// { name: 'obj', foo: [Function: foo] }
// [String: 'abc']
var obj = {
name: "obj",
foo: function () {
console.log(this);
}
};
obj.foo();
obj.foo.call("abc");
obj.foo.apply("abc");
// { name: 'obj', foo: [Function: foo] }
// [String: 'abc']
// [String: 'abc']
var obj = {
name: "obj",
foo: function () {
console.log(this);
}
};
var bar = obj.foo.bind("cba");
bar();
// [String: 'cba']
function foo() {
console.log(this);
}
var obj = {
name: "obj",
foo: foo.bind("aaa")
};
obj.foo();
// [String: 'aaa']
优先级-new高于隐式绑定
var obj = {
name: "obj",
foo: function () {
console.log(this);
}
};
var f = new obj.foo();
// foo {}
优先级-new高于显式绑定
function foo() {
console.log(this);
}
var bar = foo.bind("aaa");
var obj = new bar();
// foo {}
特殊绑定-忽略显示绑定
function foo() {
console.log(this);
}
foo.apply("abc");
foo.apply({});
foo.apply(null);
foo.apply(undefined);
// [String: 'abc']
// {}
// window
// window
function foo() {
console.log(this);
}
foo.apply("abc");
foo.apply({});
foo.apply(null);
foo.apply(undefined);
var bar = foo.bind(null);
bar();
// [String: 'abc']
// {}
// window
// window
// window
特殊绑定-间接函数引用
var obj1 = {
name: "obj1",
foo: function () {
console.log(this);
}
};
var obj2 = {
name: "obj2"
};
obj2.bar = obj1.foo;
obj2.bar();
// { name: 'obj2', bar: [Function: foo] }
var obj1 = {
name: "obj1",
foo: function () {
console.log(this);
}
};
var obj2 = {
name: "obj2"
};
(obj2.bar = obj1.foo)();
// window
function foo(el) {
console.log(el, this.id);
}
var obj = {
id: "awesome"
};
[1, 2, 3].forEach(foo, obj);
// 1 awesome
// 2 awesome
// 3 awesome
箭头函数
- ES6新增的特性
- 箭头函数不会绑定this，arguments属性
- 箭头函数不能作为构造函数来使用(不能和new一起来使用，会抛出错误)
箭头函数的使用解析
var nums = [10, 20, 45, 78];
nums.forEach(item => {
console.log(item);
});
// 10
// 20
// 45
// 78
var nums = [10, 20, 45, 78];
var result1 = nums.forEach(item => console.log(item));
var result2 = nums.filter(item => item % 2 === 0);
console.log(result1);
console.log(result2);
var result = nums
.filter(item => item % 2 === 0)
.map(item => item * 100)
.reduce((prev, item) => prev + item);
console.log(result);
// 10
// 20
// 45
// 78
// undefined
// [ 10, 20, 78 ]
// 10800
var bar = () => {
return { name: "why", age: 18 };
};
console.log(bar());
// { name: 'why', age: 18 }
var bar = () => ({ name: "why", age: 18 });
console.log(bar());
// { name: 'why', age: 18 }
箭头函数的this获取
var name = "why";
var foo = () => {
console.log(this);
};
foo();
foo.call("abc");
var obj = { foo: foo };
obj.foo();
// window
// window
// window
var obj = {
data: [],
getData: function () {
setTimeout(() => {
var result = ["abc", "cba", "nba"];
this.data = result;
}, 2000);
}
};
obj.getData();
setTimeout(() => {
console.log(obj.data);
}, 3000);
// [ 'abc', 'cba', 'nba' ]
面试题
var name = "window";
var person = {
name: "person",
sayName: function () {
console.log(this.name);
}
};
function sayName() {
var sss = person.sayName;
sss();
person.sayName();
(person.sayName)();
(b = person.sayName)();
}
sayName();
// window
// person
// person
// window
var name = "window";
var person1 = {
name: "person1",
foo1: function () {
console.log(this.name);
},
foo2: () => console.log(this.name),
foo3: function () {
return function () {
console.log(this.name);
};
},
foo4: function () {
return () => {
console.log(this.name);
};
}
};
var person2 = { name: "person2" };
person1.foo1();
person1.foo1.call(person2);
person1.foo2();
person1.foo2.call(person2);
person1.foo3()();
person1.foo3.call(person2)();
person1.foo3().call(person2);
person1.foo4()();
person1.foo4.call(person2)();
person1.foo4().call(person2);
// person1
// person2
// window
// window
// window
// window
// person2
// person1
// person2
// person1
var name = 'window'
function Person (name) {
this.name = name
this.foo1 = function () {
console.log(this.name)
},
this.foo2 = () => console.log(this.name),
this.foo3 = function () {
return function () {
console.log(this.name)
}
},
this.foo4 = function () {
return () => {
console.log(this.name)
}
}
}
var person1 = new Person('person1')
var person2 = new Person('person2')
person1.foo1()
person1.foo1.call(person2)
person1.foo2()
person1.foo2.call(person2)
person1.foo3()()
person1.foo3.call(person2)()
person1.foo3().call(person2)
person1.foo4()()
person1.foo4.call(person2)()
person1.foo4().call(person2)
// person1
// person2
// person1
// person1
// window
// window
// person2
// person1
// person2
// person1
var name = 'window'
function Person (name) {
this.name = name
this.obj = {
name: 'obj',
foo1: function () {
return function () {
console.log(this.name)
}
},
foo2: function () {
return () => {
console.log(this.name)
}
}
}
}
var person1 = new Person('person1')
var person2 = new Person('person2')
person1.obj.foo1()()
person1.obj.foo1.call(person2)()
person1.obj.foo1().call(person2)
person1.obj.foo2()()
person1.obj.foo2.call(person2)()
person1.obj.foo2().call(person2)
// window
// window
// person2
// obj
// person2
// obj
