在 javascript 函数中“返回这个”有什么作用?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8300844/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 05:28:11  来源:igfitidea点击:

What does "return this" do within a javascript function?

javascript

提问by user722756

i wonder, what does "return this" do within a javascript function, what's its purpose? supposing we have the following code:

我想知道,在 javascript 函数中“返回这个”是做什么的,它的目的是什么?假设我们有以下代码:

Function.prototype.method = function (name, func) {
  this.prototype[name] = func;
  return this;
};

What does "return this" do inside of a function?

“返回这个”在函数内部有什么作用?

I know what code above does, and what is the use of "this" keyword. I just don't know what "return this" does inside of a function.

我知道上面的代码做了什么,以及“this”关键字的用途。我只是不知道“返回这个”在函数内部做了什么。

回答by Alex Turpin

It refers to the object instance on which the method is currently being called. It's used for chaining. For example, you could do something like this:

它指的是当前正在调用该方法的对象实例。它用于链接。例如,您可以执行以下操作:

myObject.foo().bar();

Since fooreturns this(a reference to myObject), barwill be called on the object too. This is the same thing as doing

由于foo返回this(对 的引用myObject),bar也将在对象上调用。这与做同样的事情

myObject.foo();
myObject.bar();

But requires less typing.

但需要较少的打字。

Here is a more complete example:

这是一个更完整的例子:

function AnimalSounds() {}

AnimalSounds.prototype.cow = function() {
    alert("moo");
    return this;
}

AnimalSounds.prototype.pig = function() {
    alert("oink");
    return this;
}

AnimalSounds.prototype.dog = function() {
    alert("woof");
    return this;
}

var sounds = new AnimalSounds();

sounds.cow();
sounds.pig();
sounds.dog();

sounds.cow().pig().dog();

http://jsfiddle.net/jUfdr/

http://jsfiddle.net/jUfdr/

回答by marcio

It means the method will return the object it belongs to. This can be useful if you want to chain instructions like so:

这意味着该方法将返回它所属的对象。如果您想像这样链接指令,这会很有用:

MyObject.method1().method2().method3();

Real world example: jQuery

现实世界的例子:jQuery

$(this).addClass('myClass').hide();

回答by Adam Rackis

tl;drreturning thisfrom a method is a common way to allow "chaining" of methods together.

tl;drthis从方法返回是允许将方法“链接”在一起的常用方法。



thisrefers to the current context, and changes meaning depending on the manner in which you're invoking a function.

this指的是当前上下文,并根据您调用函数的方式改变含义。

With function invocation, thisrefers to the global object, even if the function is being invoked from a method, and the function belongs to the same class as the method invoking it. Douglas Crockford has described this as "mistake in the design of the language" [Crockford 28]

With method invocation, thisrefers to the object on which the method is being invoked.

With apply invocation, thisrefers to whatever you set it to when calling apply.

With constructor invocation, thisrefers to the object that is created for you behind the scenes, which is returned when the constructor exits (provided you don't misguidedly return your own object from a constructor).

使用函数调用,this指的是全局对象,即使函数是从一个方法调用的,并且该函数与调用它的方法属于同一类。Douglas Crockford 将其描述为“语言设计中的错误”[Crockford 28]

使用方法调用,this指的是调用方法的对象。

使用 apply 调用,this指的是您在调用 apply 时设置的任何内容。

使用构造函数调用,this指的是在幕后为您创建的对象,该对象在构造函数退出时返回(前提是您没有错误地从构造函数返回您自己的对象)。

In your example above, you're creating a new method called methodthat allows you to add functions dynamically, and returns this, thereby allowing chaining.

在上面的示例中,您正在创建一个名为的新方法method,该方法允许您动态添加函数并返回this,从而允许链接。

So you could do something like:

所以你可以这样做:

Car.method("vroom", function(){ alert("vroom"); })
   .method("errrk", function() { alert("errrk"); });

and so on.

等等。

回答by Jeff Lauder

It returns this, usually meaning the html element that called it, but "this" can have various meanings http://www.quirksmode.org/js/this.html

它返回 this,通常表示调用它的 html 元素,但“this”可以有多种含义 http://www.quirksmode.org/js/this.html