JS中函式的背景關系和背景關系規則
一、函式的背景關系
- 函式中可以使用this關鍵字，它表示函式的背景關系
- 函式中的this具體指代什么必須通過呼叫函式時的“前言后語”來判斷
- 函式的背景關系由呼叫方式決定
1.情形1：物件打點呼叫函式，函式中的this指代這個打點的物件xiaoming.sayHello()
2. 情形2：圓括號直接呼叫函式，函式中的this指代window物件var sayHello =xiaoming.sayHello;
sayHello();
總之，函式只有被呼叫，它的背景關系才能被決定
二、背景關系規則
（1）規則一：物件打點呼叫它的方法函式，則函式的背景關系是這個打點的物件
物件.方法()
function fun() {
console.log(this.a + this.b);
}
var obj = {
a: 1,
b: 2,
c: [{
a: 3,
b: 4,
c: fun
}]
};
var a = 5;
obj.c[0].c(); //構成物件.方法()的 形式，適用規則1 結果為7
（2）規則二：圓括號直接呼叫函式，則函式的背景關系是window物件函式()
function fun() {
return this.a + this.b;
}
var a = 1;
var b = 2;
var obj = {
a: 3,
b: fun(), //適用于規則2 window物件 3
fun: fun
};
var result = obj.fun(); //適用于規則1 結果為6
console.log(result);
（3）規則三：陣列（類陣列物件）列舉出函式進行呼叫，背景關系是這個陣列（類陣列物件）陣列[下標]()
var arr = ['A', 'B', 'C', function () {
console.log(this[0]);
}];
arr[3](); //A
（4）規則四：IIFE中的函式，背景關系是window物件
(function() {
})();
var a = 1;
var obj = {
a: 2,
fun: (function () { //IIFE立即執行，回傳內層函式
var a = this.a; //適用規則4，this.a是window a屬性即1
return function () {
console.log(a + this.a); //前面指閉包中的a值，即1，this.a是規則1中 2
} //適用規則4
})() //最后結果3
};
obj.fun() //適用規則1 即2
（5）規則五：定時器、延時器呼叫函式，背景關系是window物件setInterval(函式, 時間); setTimeout(函式, 時間);
var obj = {
a: 1,
b: 2,
fun: function () {
console.log(this.a + this.b);
}
}
var a = 3;
var b = 4;
setTimeout(obj.fun, 2000); //適用規則五 7
var obj = {
a: 1,
b: 2,
fun: function () {
console.log(this.a + this.b);
}
}
var a = 3;
var b = 4;
setTimeout(function () { //延時器呼叫的是外層的匿名函式
obj.fun(); //適用規則1 //真正呼叫函式的不再是延時器，而是obj.fun呼叫的，
}, 2000);
（6）規則六：事件處理函式的背景關系是系結事件的DOM元素
DOM元素.onclick = function () { };
案例1：實作效果：點擊哪個盒子，哪個盒子就變紅，要求使用同 一個事件處理函式實作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
float: left;
border: 1px solid #000;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<script>
function setColorToRed() {
this.style.backgroundColor = 'red';
//事件處理中表示系結事件的元素
}
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');
box1.onclick = setColorToRed;
box2.onclick = setColorToRed;
box3.onclick = setColorToRed;
</script>
</body>
</html>
案例二：實作效果：點擊哪個盒子，哪個盒子在2000毫秒后就變紅，要求使用同一個事件處理函式實作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
float: left;
border: 1px solid #000;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<script>
function setColorToRed() {
// 備份背景關系：用一個變數將外部的this備份一下，不會干擾了
var self = this;
setTimeout(function() {
self.style.backgroundColor = 'red';
}, 2000);
//事件處理時的背景關系是點擊的那個盒子DOM元素 -> 符合規則六-> 存盤到self
//但是里面加了一層函式，加了延時器，函式背景關系就變了 符合規則五
}
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');
box1.onclick = setColorToRed;
box2.onclick = setColorToRed;
box3.onclick = setColorToRed;
</script>
</body>
</html>
總結：
問：什么時候需要備份？‘
答：當你的函式有內層函式，萬一內層函式會改變背景關系，就需要備份了
三、call和apply能指定函式的背景關系
1.語法
函式.call(背景關系); //sum.call(xiaoming)
函式.apply(背景關系); //sum.apply(xiaoming)
function sum() {
alert(this.chinese + this.math + this.english);
}
var xiaoming = {
chinese: 80,
math: 95,
english: 93
}
sum.call(xiaoming)
sum.apply(xiaoming)
2.call和apply的區別
function sum(b1, b2) {
alert(this.c + this.m + this.e + b1 + b2);
}
sum.call(xiaoming, 5, 3); //call要用逗號羅列引數
sum.apply(xiaoming, [5, 3]); //apply要把引數寫到陣列中
總結：
以及備份背景關系
學到目前的微微一點總結，可能不太全面
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/400588.html
標籤：其他
上一篇：安卓開發：經期助手App
下一篇：vue 打包的方式