JavaScript中的方法是什么

1.什么是方法

定义并调用一个常规函数:

成都创新互联公司成都网站建设定制开发,是成都网站营销推广公司,为水电改造提供网站建设服务,有成熟的网站定制合作流程,提供网站定制设计服务:原型图制作、网站创意设计、前端HTML5制作、后台程序开发等。成都网站设计热线:18982081108

 
 
 
 
  1. function greet(who) { 
  2.   return `Hello, ${who}!`; 
  3.  
  4. greet('World'); // => 'Hello, World!' 

function关键字后跟其名称,参数和主体:function greet(who){...}进行常规的函数定义。

greet('World')是常规的函数调用。函数greet('World')接受参数中的数据。

如果who是一个对象的属性呢?要方便访问对象的属性,我们可以将函数附加到该对象,换句话说,就是创建一个方法。

我们将greet()作为对象world的一种方法:

 
 
 
 
  1. const world = { 
  2.   who: 'World', 
  3.  
  4.  greet() { return `Hello, ${this.who}!`; }} 
  5.  
  6. world.greet(); // => 'Hello, World!' 

greet() { ... }现在是属于world对象的方法, world.greet()是方法调用。

在greet()方法内部,this指向该方法所属的对象—world,这就是为啥可以this.who访问 word属性的原因。

注意,this也称为上下文。

上下文是可选的

在上一个示例中,我们使用this来访问该方法所属的对象,但是 JS 没有强制让方法使用 this。

因此,可以将对象用作方法的命名空间:

 
 
 
 
  1. const namespace = { 
  2.   greet(who) { 
  3.     return `Hello, ${who}!`; 
  4.   }, 
  5.  
  6.   farewell(who) { 
  7.     return `Good bye, ${who}!`; 
  8.   } 
  9.  
  10. namespace.greet('World');    // => 'Hello, World!' 
  11. namespace.farewell('World'); // => 'Good bye, World!' 

namespace是一个包含2个方法的对象:namespace.greet()和namespace.farewell()。

2. 对象字面量方法

如前所述,我们可以直接在对象字面量中定义方法

 
 
 
 
  1. const world = { 
  2.   who: 'World', 
  3.  
  4.  greet() { return `Hello, ${this.who}!`; }}; 
  5.  
  6. world.greet(); // => 'Hello, World!' 

greet() { .... }是在对象定义的方法,这种定义类型称为速记方法定义(从ES2015开始可用)。方法定义的语法也更长:

 
 
 
 
  1. const world = { 
  2.   who: 'World', 
  3.   greet: function() {  
  4.     return `Hello, ${this.who}!`;  
  5.   } 
  6.  
  7. world.greet(); // => 'Hello, World!' 

greet: function() { ... }是一个方法定义,注意附加的冒号和function关键字。

动态添加方法

方法只是一个函数,它作为属性存储在对象上。因此,我们可以向对象动态添加方法:

 
 
 
 
  1. const world = { 
  2.   who: 'World', 
  3.  
  4.   greet() { 
  5.     return `Hello, ${this.who}!`; 
  6.   } 
  7. }; 
  8.  
  9. // A a new property holding a function 
  10. world.farewell = function () { 
  11.   return `Good bye, ${this.who}!`; 
  12.  
  13. world.farewell(); // => 'Good bye, World!' 

3.类方法

在 JavaScript 中,类别语法定义了一个类别,该类别将用作其实例的模板。

类也可以有方法:

 
 
 
 
  1. class Greeter { 
  2.   constructor(who) { 
  3.     this.who = who; 
  4.   } 
  5.  
  6.  greet() { console.log(this === myGreeter); // logs true return `Hello, ${this.who}!`; }} 
  7.  
  8. const myGreeter = new Greeter('World'); 
  9. 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值是什么:

 
 
 
 
  1. const world = { 
  2.   who: 'World', 
  3.  
  4.   greet() { 
  5.  console.log(this === world);    return `Hello, ${this.who}!`; 
  6.   } 
  7. }; 
  8.  
  9. // 方法调用 
  10. world.greet(); // logs true 
  11. const greetFunc = world.greet; 
  12. // 常规函数调用 
  13. greetFunc(); // => logs false 

world.greet()是一个方法调用。对象world,后面是一个点.,最后是使方法调用的方法本身。

greetFunc与world.greet是同一个函数。但当作为常规函数greetFunc()调用时,这个在greet()中的并不等于world对象,而是全局对象(在浏览器中是window)

我们将诸如greetFunc = world.greet之类的表达式命名为将方法与其对象分离的方法。调用分离的方法greetFunc()时,this等于全局对象。

将方法与其对象分离可以采用不同的形式:

 
 
 
 
  1. // 方法分离, this 丢失了! 
  2. const myMethodFunc = myObject.myMethod; 
  3.  
  4. // 方法分离, this 丢失了! 
  5. setTimeout(myObject.myMethod, 1000); 
  6.  
  7. // 方法分离, this 丢失了! 
  8. myButton.addEventListener('click', myObject.myMethod) 
  9.  
  10. // 方法分离, this 丢失了! 
  11. My React 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:

 
 
 
 
  1. function greet() { 
  2.   return `Hello, ${this.who}!`; 
  3.  
  4. const aliens = { 
  5.   who: 'Aliens' 
  6. }; 
  7.  
  8. greet.call(aliens); // => 'Hello, Aliens!' 
  9. greet.apply(aliens); // => 'Hello, Aliens!' 

greet.call(aliens)和greet.apply(aliens)都是间接的方法调用。这个在greet()函数中的值等于aliens对象。

4.3 绑定函数调用

最后,还有一种在对象上使函数作为方法调用的第三种方法。我们可以将函数绑定为具有特定上下文。

可以使用特殊方法创建绑定函数

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

myFunc.bind(thisArg)的第一个参数是函数要绑定到的上下文。

例如,让我们重用greet()并将其绑定到aliens上下文

 
 
 
 
  1. function greet() { 
  2.   return `Hello, ${this.who}!`; 
  3.  
  4. const aliens = { 
  5.   who: 'Aliens' 
  6. }; 
  7.  
  8. const greetAliens = greet.bind(aliens); 
  9.  
  10. greetAliens(); // => 'Hello, Aliens!' 

调用 greet.bind(aliens) 会创建一个新函数,该函数将 this 绑定到aliens对象。

同样,使用绑定函数可以模拟方法调用。当调用绑定函数greetAliens()时,this等于该函数中的 aliens。

5. 箭头函数作为方法

不推荐使用箭头函数作为方法,原因如下。

我们将greet()方法定义为一个箭头函数:

 
 
 
 
  1. const world = { 
  2.   who: 'World', 
  3.  
  4.   greet: () => { 
  5.     return `Hello, ${this.who}!`; 
  6.   } 
  7. }; 
  8.  
  9. 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 特有的一点是,仅仅定义一个方法是不够的。我们还需要确保使用方法调用。通常,方法调用具有以下语法

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

有趣的是,在 JS 中,我们可以定义一个常规函数,但不属于一个对象,然后作为一个任意对象的方法调用该函数。可以使用间接函数调用或将函数绑定到特定上下文来实现这一点

 
 
 
 
  1. // Indirect function invocation 
  2. myRegularFunc.call(myObject, 'Arg 1', 'Arg 2'); 
  3. myRegularFunc.apply(myObject, 'Arg 1', 'Arg 2'); 
  4.  
  5. // Bound function 
  6. const myBoundFunc = myRegularFunc.bind(myObject); 
  7. myBoundFunc('Arg 1', 'Arg 2'); 

我是小智,我要去刷碗了,我们下期见~

作者:Shadeed 译者:前端小智 来源:dmitripavlutin 原文:https://dmitripavlutin.com/javascript-method/

本文转载自微信公众号「大迁世界」,可以通过以下二维码关注。转载本文请联系大迁世界公众号。

本文题目:JavaScript中的方法是什么
网页网址:http://www.mswzjz.com/qtweb/news20/183570.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联