函式呼叫模式

如果一個函式不是一個物件的屬性時，就是被當做一個函式來進行呼叫的，此時this指向了window

function fn(){
console.log(this); // 指向window
}
fn();

方法呼叫模式

當一個函式被保存為物件的一個屬性時，我們稱之為一個方法，當一個方法被呼叫時，this被系結到當前物件

const obj = {
sayHi:function(){
console.log(this); // 在方法呼叫模式中，this指向呼叫當前方法的物件，
}
}
obj.sayHi();

建構式呼叫模式

如果函式是通過new關鍵字進行呼叫的，此時this被系結到創建出來的新物件上，

function Person(){
console.log(this);
}
Person(); // 指向window
var p = new Person(); // this指向Person

背景關系呼叫模式

也叫背景關系模式,分為 apply 與 call

call

call方法可以呼叫一個函式，并且可以指定這個函式的this指向

  const RichWumon = {
      name: "海海",
      say: function () {
        console.log(this.name, " 你好呀");
      }
    }

    const obj = {
      name: "小陳"
    }

    RichWumon.say();            // 海海
    RichWumon.say.call(obj);    // 小陳

call應用

將偽陣列轉成陣列

let divs = document.querySelectorAll('div');
console.log(divs);

function change(nodelist) {
console.log(Object.prototype.toString.call(nodelist));
return Array.prototype.slice.call(nodelist);

}

apply

就是apply()方法接受的是一個包含多個引數的陣列，而call()方法接受的是若干個引數的串列

    const RichWumon = {
      name: "海海",
      say: function () {
        console.log(this.name, "你好呀");
      }
    }

    const obj = {
      name: "小陳"
    }

    RichWumon.say();			// 海海
    RichWumon.say.apply(obj);	// 小陳

apply應用

1.簡化 console.log方法

// 簡化log方法
function log() {
console.log.apply(console, arguments);
}

bind方法

bind()方法創建一個新的函式, 可以系結新的函式的this指向

var name = '海海';
function Fn(){
    this.age = 18;
    
    console.log(this.name + this.age);
}

Fn();			// 海海 18

// 回傳值：新的函式
// 引數：新函式的this指向，當系結了新函式的this指向后，無論使用何種呼叫模式，this都不會改變，
let obj = {
    name:'小陳',
}
const newFn = Fn.bind(obj);
newFn();		// 小陳 18

this的指向

單獨使用，this 指向全域物件

console.log(this); // window

函式中的 this 指向全域物件

function show(){
console.log(this); // window
}

show();

在函式內部，this 的指向在函式定義的時候是不能確定的，只有函式執行的時候才能確定

const a = 18;
const obj = {
a: 19,
b: {
a: 20,
c: function () {
console.log(this.a); // 20
}
}
}
obj.b.c();

在方法中，this 指代該呼叫方法的物件

const obj ={
name:"海海",
say:function(){
console.log(this); // {name:"海海"}
}
}

箭頭函式中的this指向

箭頭函式自己沒有this
箭頭函式的this是確定的，且不變
箭頭函式中的this指向創建這個箭頭函式所在物件的背景關系

上一章：JavaScript 進階第五章（原型）

下一章：JavaScript 進階第七章（es6中的class ）

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/296973.html

標籤：其他

上一篇：面試率 90% 的JS事件回圈Event Loop，看這篇就夠了！! !

下一篇：【Vue基礎知識總結 1】Vue入門

JavaScript 進階第六章（this與函式的呼叫模式 ）