JavaScript中的方法是什么
1.什么是方法
定義并調用一個常規函數：
- function greet(who) {
- return `Hello, ${who}!`;
- }
- greet('World'); // => 'Hello, World!'
function關鍵字后跟其名稱，參數和主體：function greet(who){...}進行常規的函數定義。
greet('World')是常規的函數調用。函數greet('World')接受參數中的數據。
如果who是一個對象的屬性呢?要方便訪問對象的屬性，我們可以將函數附加到該對象，換句話說，就是創建一個方法。
我們將greet()作為對象world的一種方法：
- const world = {
- who: 'World',
- greet() { return `Hello, ${this.who}!`; }}
- world.greet(); // => 'Hello, World!'
greet() { ... }現在是屬于world對象的方法， world.greet()是方法調用。
在greet()方法內部，this指向該方法所屬的對象—world，這就是為啥可以this.who訪問 word屬性的原因。
注意，this也稱為上下文。
上下文是可選的
在上一個示例中，我們使用this來訪問該方法所屬的對象，但是 JS 沒有強制讓方法使用 this。
因此，可以將對象用作方法的命名空間：
- const namespace = {
- greet(who) {
- return `Hello, ${who}!`;
- },
- farewell(who) {
- return `Good bye, ${who}!`;
- }
- }
- namespace.greet('World'); // => 'Hello, World!'
- namespace.farewell('World'); // => 'Good bye, World!'
namespace是一個包含2個方法的對象:namespace.greet()和namespace.farewell()。
2. 對象字面量方法
如前所述，我們可以直接在對象字面量中定義方法
- const world = {
- who: 'World',
- greet() { return `Hello, ${this.who}!`; }};
- world.greet(); // => 'Hello, World!'
greet() { .... }是在對象定義的方法,這種定義類型稱為速記方法定義(從ES2015開始可用)。方法定義的語法也更長:
- const world = {
- who: 'World',
- greet: function() {
- return `Hello, ${this.who}!`;
- }
- }
- world.greet(); // => 'Hello, World!'
greet: function() { ... }是一個方法定義，注意附加的冒號和function關鍵字。
動態添加方法
方法只是一個函數，它作為屬性存儲在對象上。因此，我們可以向對象動態添加方法：
- const world = {
- who: 'World',
- greet() {
- return `Hello, ${this.who}!`;
- }
- };
- // A a new property holding a function
- world.farewell = function () {
- return `Good bye, ${this.who}!`;
- }
- world.farewell(); // => 'Good bye, World!'
3.類方法
在 JavaScript 中，類別語法定義了一個類別，該類別將用作其實例的模板。
類也可以有方法：
- class Greeter {
- constructor(who) {
- this.who = who;
- }
- greet() { console.log(this === myGreeter); // logs true return `Hello, ${this.who}!`; }}
- const myGreeter = new Greeter('World');
- myGreeter.greet(); // => 'Hello, World!'
greet() { ... }是在類內部定義的方法。
每次我們使用new操作符(例如myGreeter = new Greeter('World'))創建一個類的實例時，都可以在創建的實例上調用方法。
myGreeter.greet()是如何在實例上調用方法greet()的方法。重要的是方法內部的this等于實例本身：this等于greet() { ... }方法內部的 myGreeter。
4.如何調用方法
4.1方法調用
JavaScript 特別有趣的是，在對象或類上定義方法只能算完成工作的一半。為了維護方法的上下文，我們必須確保將方法作為方法調用。
我們來看看為什么它很重要。
回憶一下有greet()方法的world對象。我們測試一下greet()作為一個方法和一個常規函數調用時，this值是什么:
- const world = {
- who: 'World',
- greet() {
- console.log(this === world); return `Hello, ${this.who}!`;
- }
- };
- // 方法調用
- world.greet(); // logs true
- const greetFunc = world.greet;
- // 常規函數調用
- greetFunc(); // => logs false
world.greet()是一個方法調用。對象world,后面是一個點.，最后是使方法調用的方法本身。
greetFunc與world.greet是同一個函數。但當作為常規函數greetFunc()調用時，這個在greet()中的并不等于world對象，而是全局對象(在瀏覽器中是window)
我們將諸如greetFunc = world.greet之類的表達式命名為將方法與其對象分離的方法。調用分離的方法greetFunc()時，this等于全局對象。
將方法與其對象分離可以采用不同的形式:
- // 方法分離, this 丟失了!
- const myMethodFunc = myObject.myMethod;
- // 方法分離, this 丟失了!
- setTimeout(myObject.myMethod, 1000);
- // 方法分離, this 丟失了!
- myButton.addEventListener('click', myObject.myMethod)
- // 方法分離, this 丟失了!
- <button onClick={myObject.myMethod}>My React Button</button>
為了避免丟失方法的上下文，請確保使用方法調用world.greet()或手動將方法綁定到對象greetFunc = world.greet.bind(this)。
4.2間接函數調用
如上一節所述，常規函數調用已將this解析為全局對象。常規函數是否可以通過方法自定義 this值?
歡迎使用以下間接函數調用：
myFunc.call(thisArg, arg1, arg2, ..., argN);
myFunc.apply(thisArg, [arg1, arg2, ..., argN]);
函數對象上可用的方法。
myFunc.call(thisArg) 和 myFunc.apply(thisArg) 的第一個參數是間接調用的上下文(this值)。換句話說，我們可以手動指定函數內部 this 的值。
例如，讓我們將greet()定義為一個常規函數，以及一個具有who屬性的對象alien:
- function greet() {
- return `Hello, ${this.who}!`;
- }
- const aliens = {
- who: 'Aliens'
- };
- greet.call(aliens); // => 'Hello, Aliens!'
- greet.apply(aliens); // => 'Hello, Aliens!'
greet.call(aliens)和greet.apply(aliens)都是間接的方法調用。這個在greet()函數中的值等于aliens對象。
4.3 綁定函數調用
最后，還有一種在對象上使函數作為方法調用的第三種方法。我們可以將函數綁定為具有特定上下文。
可以使用特殊方法創建綁定函數
- const myBoundFunc = myFunc.bind(thisArg, arg1, arg2, ..., argN);
myFunc.bind(thisArg)的第一個參數是函數要綁定到的上下文。
例如，讓我們重用greet()并將其綁定到aliens上下文
- function greet() {
- return `Hello, ${this.who}!`;
- }
- const aliens = {
- who: 'Aliens'
- };
- const greetAliens = greet.bind(aliens);
- greetAliens(); // => 'Hello, Aliens!'
調用 greet.bind(aliens) 會創建一個新函數，該函數將 this 綁定到aliens對象。
同樣，使用綁定函數可以模擬方法調用。當調用綁定函數greetAliens()時，this等于該函數中的 aliens。
5. 箭頭函數作為方法
不推薦使用箭頭函數作為方法，原因如下。
我們將greet()方法定義為一個箭頭函數:
- const world = {
- who: 'World',
- greet: () => {
- return `Hello, ${this.who}!`;
- }
- };
- world.greet(); // => 'Hello, undefined!'
不幸的是，world.greet()返回'Hello, undefined!而不是我們期待的'Hello, World!'。
問題是箭頭函數內部的this等于外部作用域的this。但是，此時，我們想要的this是world對象。
上述箭頭功能內部 this 等于全局對象：window。'Hello, ${this.who}!' 結果是 Hello, ${windows.who}!，最后是 'Hello, undefined!'。
我喜歡箭頭功能， 但是它們不能用作方法。
6. 總結
該方法是一個屬于對象的函數。方法的上下文(this)等于該方法所屬的對象。
還可以在類上定義方法。這個類的方法內部等于實例。JS 特有的一點是，僅僅定義一個方法是不夠的。我們還需要確保使用方法調用。通常，方法調用具有以下語法
- // Method invocation
- myObject.myMethod('Arg 1', 'Arg 2');
有趣的是，在 JS 中，我們可以定義一個常規函數，但不屬于一個對象，然后作為一個任意對象的方法調用該函數。可以使用間接函數調用或將函數綁定到特定上下文來實現這一點
- // Indirect function invocation
- myRegularFunc.call(myObject, 'Arg 1', 'Arg 2');
- myRegularFunc.apply(myObject, 'Arg 1', 'Arg 2');
- // Bound function
- const myBoundFunc = myRegularFunc.bind(myObject);
- myBoundFunc('Arg 1', 'Arg 2');
我是小智，我要去刷碗了，我們下期見~
作者：Shadeed 譯者：前端小智 來源：dmitripavlutin 原文：https://dmitripavlutin.com/javascript-method/
本文轉載自微信公眾號「大遷世界」，可以通過以下二維碼關注。轉載本文請聯系大遷世界公眾號。
