JavaScript中方法的作用是什么

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)JavaScript中方法的作用是什么，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

成都創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：做網(wǎng)站、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的復(fù)興網(wǎng)站設(shè)計(jì)、移動媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

1.什么是方法

定義并調(diào)用一個(gè)常規(guī)函數(shù)：

function greet(who) {   return `Hello, ${who}!`; }  greet('World'); // => 'Hello, World!'

function關(guān)鍵字后跟其名稱，參數(shù)和主體：function greet(who){...}進(jìn)行常規(guī)的函數(shù)定義。

greet('World')是常規(guī)的函數(shù)調(diào)用。函數(shù)greet('World')接受參數(shù)中的數(shù)據(jù)。

如果who是一個(gè)對象的屬性呢?要方便訪問對象的屬性，我們可以將函數(shù)附加到該對象，換句話說，就是創(chuàng)建一個(gè)方法。

我們將greet()作為對象world的一種方法：

const world = {   who: 'World',   greet() { return `Hello, ${this.who}!`; }}  world.greet(); // => 'Hello, World!'

greet() { ... }現(xiàn)在是屬于world對象的方法， world.greet()是方法調(diào)用。

在greet()方法內(nèi)部，this指向該方法所屬的對象—world，這就是為啥可以this.who訪問 word屬性的原因。

注意，this也稱為上下文。

上下文是可選的

在上一個(gè)示例中，我們使用this來訪問該方法所屬的對象，但是 JS 沒有強(qiáng)制讓方法使用 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是一個(gè)包含2個(gè)方法的對象: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() { ... }是一個(gè)方法定義，注意附加的冒號和function關(guān)鍵字。

動態(tài)添加方法

方法只是一個(gè)函數(shù)，它作為屬性存儲在對象上。因此，我們可以向?qū)ο髣討B(tài)添加方法：

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 中，類別語法定義了一個(gè)類別，該類別將用作其實(shí)例的模板。

類也可以有方法：

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() { ... }是在類內(nèi)部定義的方法。

每次我們使用new操作符(例如myGreeter = new Greeter('World'))創(chuàng)建一個(gè)類的實(shí)例時(shí)，都可以在創(chuàng)建的實(shí)例上調(diào)用方法。

myGreeter.greet()是如何在實(shí)例上調(diào)用方法greet()的方法。重要的是方法內(nèi)部的this等于實(shí)例本身：this等于greet() {  ... }方法內(nèi)部的 myGreeter。

4.如何調(diào)用方法

4.1方法調(diào)用

JavaScript 特別有趣的是，在對象或類上定義方法只能算完成工作的一半。為了維護(hù)方法的上下文，我們必須確保將方法作為方法調(diào)用。

我們來看看為什么它很重要。

回憶一下有g(shù)reet()方法的world對象。我們測試一下greet()作為一個(gè)方法和一個(gè)常規(guī)函數(shù)調(diào)用時(shí)，this值是什么:

const world = {   who: 'World',    greet() {  console.log(this === world);    return `Hello, ${this.who}!`;   } };  // 方法調(diào)用 world.greet(); // logs true const greetFunc = world.greet; // 常規(guī)函數(shù)調(diào)用 greetFunc(); // => logs false

world.greet()是一個(gè)方法調(diào)用。對象world,后面是一個(gè)點(diǎn).，最后是使方法調(diào)用的方法本身。

greetFunc與world.greet是同一個(gè)函數(shù)。但當(dāng)作為常規(guī)函數(shù)greetFunc()調(diào)用時(shí)，這個(gè)在greet()中的并不等于world對象，而是全局對象(在瀏覽器中是window)

我們將諸如greetFunc =  world.greet之類的表達(dá)式命名為將方法與其對象分離的方法。調(diào)用分離的方法greetFunc()時(shí)，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>

為了避免丟失方法的上下文，請確保使用方法調(diào)用world.greet()或手動將方法綁定到對象greetFunc =  world.greet.bind(this)。

4.2間接函數(shù)調(diào)用

如上一節(jié)所述，常規(guī)函數(shù)調(diào)用已將this解析為全局對象。常規(guī)函數(shù)是否可以通過方法自定義 this值?

歡迎使用以下間接函數(shù)調(diào)用：

myFunc.call(thisArg, arg1, arg2, ..., argN);

myFunc.apply(thisArg, [arg1, arg2, ..., argN]);

函數(shù)對象上可用的方法。

myFunc.call(thisArg) 和 myFunc.apply(thisArg)  的第一個(gè)參數(shù)是間接調(diào)用的上下文(this值)。換句話說，我們可以手動指定函數(shù)內(nèi)部 this 的值。

例如，讓我們將greet()定義為一個(gè)常規(guī)函數(shù)，以及一個(gè)具有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)都是間接的方法調(diào)用。這個(gè)在greet()函數(shù)中的值等于aliens對象。

4.3 綁定函數(shù)調(diào)用

最后，還有一種在對象上使函數(shù)作為方法調(diào)用的第三種方法。我們可以將函數(shù)綁定為具有特定上下文。

可以使用特殊方法創(chuàng)建綁定函數(shù)

const myBoundFunc = myFunc.bind(thisArg, arg1, arg2, ..., argN);

myFunc.bind(thisArg)的第一個(gè)參數(shù)是函數(shù)要綁定到的上下文。

例如，讓我們重用greet()并將其綁定到aliens上下文

function greet() {   return `Hello, ${this.who}!`; }  const aliens = {   who: 'Aliens' };  const greetAliens = greet.bind(aliens);  greetAliens(); // => 'Hello, Aliens!'

調(diào)用 greet.bind(aliens) 會創(chuàng)建一個(gè)新函數(shù)，該函數(shù)將 this 綁定到aliens對象。

同樣，使用綁定函數(shù)可以模擬方法調(diào)用。當(dāng)調(diào)用綁定函數(shù)greetAliens()時(shí)，this等于該函數(shù)中的 aliens。

5. 箭頭函數(shù)作為方法

不推薦使用箭頭函數(shù)作為方法，原因如下。

我們將greet()方法定義為一個(gè)箭頭函數(shù):

const world = {   who: 'World',    greet: () => {     return `Hello, ${this.who}!`;   } };  world.greet(); // => 'Hello, undefined!'

不幸的是，world.greet()返回'Hello, undefined!而不是我們期待的'Hello, World!'。

問題是箭頭函數(shù)內(nèi)部的this等于外部作用域的this。但是，此時(shí)，我們想要的this是world對象。

上述箭頭功能內(nèi)部 this 等于全局對象：window。'Hello, ${this.who}!' 結(jié)果是 Hello,  ${windows.who}!，最后是 'Hello, undefined!'。

我喜歡箭頭功能， 但是它們不能用作方法。

6. 總結(jié)

該方法是一個(gè)屬于對象的函數(shù)。方法的上下文(this)等于該方法所屬的對象。

還可以在類上定義方法。這個(gè)類的方法內(nèi)部等于實(shí)例。JS  特有的一點(diǎn)是，僅僅定義一個(gè)方法是不夠的。我們還需要確保使用方法調(diào)用。通常，方法調(diào)用具有以下語法

// Method invocation myObject.myMethod('Arg 1', 'Arg 2');

有趣的是，在 JS  中，我們可以定義一個(gè)常規(guī)函數(shù)，但不屬于一個(gè)對象，然后作為一個(gè)任意對象的方法調(diào)用該函數(shù)?？梢允褂瞄g接函數(shù)調(diào)用或?qū)⒑瘮?shù)綁定到特定上下文來實(shí)現(xiàn)這一點(diǎn)

// 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');

上述就是小編為大家分享的JavaScript中方法的作用是什么了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前標(biāo)題：JavaScript中方法的作用是什么
文章分享：http://bm7419.com/article22/psdijc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、企業(yè)網(wǎng)站制作、微信小程序、網(wǎng)站設(shè)計(jì)公司、域名注冊、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)