这个陈述有什么作用? console.log.bind(控制台) [英] What does this statement do? console.log.bind(console)

查看:392
本文介绍了这个陈述有什么作用? console.log.bind(控制台)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用JavaScript并且语句出现问题

I am using JavaScript and getting a problem with the statement

console.log.bind(console)

请告诉我这个陈述实际上做了什么。我已经多次申请但没有做任何事情。

Please tell me what does this statement actually do. I have applied this several times but it did not do anything.

推荐答案

在JavaScript中,这个如何调用函数确定(对于正常函数,请参见下面的*)。如果它被作为检索对象属性的表达式的一部分调用(例如, foo.bar()调用 bar()作为从 foo 获取它的属性检索操作的一部分,设置为属性来自的对象在调用函数期间。

In JavaScript, this within a function call is determined by how the function is called (for normal functions, see * below). If it's called as part of an expression retrieving an object property (e.g., foo.bar() calls bar() as part of a property retrieval operation getting it from foo), this is set to the object that the property came from during the call to the function.

假设你想要一个较短形式的 console.log ,比如˚F。你可以这样做:

Suppose you wanted a shorter form of console.log, like f. You might do this:

var f = console.log; // <== Suspect!

...但是如果 log 功能在调用期间依赖 this 引用 console 对象,然后调用 f(消息这里)将无效,因为将不会引用 console

...but if the log function relies on this referring to the console object during the call, then calling f("Message here") won't work, because this won't refer to console.

函数#bind 就是出于这种情况:它允许你创建一个新的函数,当被调用时,它将会使用调用原始文件,将此设置为您提供的值。所以

Function#bind is for just that situation: It lets you create a new function that, when called, will call the original with this set to the value you give. So

var f = console.log.bind(console); // Still suspect, for a different reason

... 应该,理论上,给你一个函数 f ,你可以调用它来登录控制台。

...should, in theory, give you a function, f, that you can call to log to the console.

除外:主机提供的功能,如 console.log (以及 alert getElementById )不需要是真正的JavaScript函数(尽管在现代浏览器中它们往往是,或者至少非常接近),并且不需要具有所有功能,包含 bind 。因此,如果您在该行上收到错误,可能是您使用该行的引擎在 bind > console.log function。

Except: Host-provided functions like console.log (and alert and getElementById) aren't required to be "real" JavaScript functions (although on modern browsers they tend to be, or at least very close), and aren't required to have all of their features, inculding bind. So if you're getting an error on that line, it may be that the engine you're using that line on doesn't support bind on the console.log function.

那么什么是主机提供的功能?任何未在规范中明确定义为 JavaScript (语言)一部分的函数。再次,在浏览器上,浏览器相关的功能,如 alert console.log 等。

So what are "host-provided functions"? Any function not explicitly defined in the specification as being part of JavaScript, the language. So again, on a browser that's browser-related functions like alert or console.log and such.

我可以想到这两行可能给你带来麻烦的原因:

I can think of two reasons that line might be giving you trouble:


  1. 以上:您使用的JavaScript引擎不会使 console.log 成为一个真正的函数。

  1. The above: You're using a JavaScript engine that doesn't make console.log a real function.

您正在IE上使用上面的行并关闭了Dev Tools。在IE上,当dev工具未打开时, console 对象未定义,因此该行将抛出 ReferenceError

You're using the line above on IE with the Dev Tools closed. On IE when the dev tools aren't open, the console object isn't defined, and so that line will throw a ReferenceError.

如果最终目标是获得一个你可以打电话的功能,比如说 f(在这里留言),对于 console.log ,以下是处理上述#1和#2的方法:

If the end goal is to get a function you can call, say f("Message here"), for console.log, here's how you can do that dealing with both #1 and #2 above:

function f(item) {
    if (typeof console != "undefined" && console.log) {
        console.log(item);
    }
}

这只允许你给一个项目,而 console.log 允许你提供多个项目( console.log(this,that,and other)),但是如果 console.log 可能不是真正的JavaScript函数,那么它可能没有函数#application ,这使它很难包装。

That only lets you give one item, whereas console.log lets you give multiple items (console.log("this", "that", "and the other")), but if console.log may not be a real JavaScript function, then it may not have Function#apply, which makes it very hard to wrap it.

现在,如果你不关心获得相同的输出你会得到 console.log(this,that,and other)只要你能看到它的内容,只需使用控制台即可。 log(arguments); arguments 是传递给函数的所有参数的内置标识符)。但是如果你想复制确切的输出,你最终会做这样的事情:

Now, if you don't care about getting the same output you'd get from console.log("this", "that", "and the other") so long as you can see what's there, simply use console.log(arguments); (arguments is the built-in identifier for all arguments passed into a function). But if you want to replicate the exact output, you end up doing something like this:

function f() {
    var a = arguments;

    if (typeof console != "undefined" && console.log) {
        if (console.log.apply) {
            // It has Function#apply, use it
            console.log.apply(console, arguments);
        } else {
            // Ugh, no Function#apply
            switch (a.length) {
                case 0: console.log(); break;
                case 1: console.log(a[0]); break;
                case 2: console.log(a[0], a[1]); break;
                case 3: console.log(a[0], a[1], a[2]); break;
                case 4: console.log(a[0], a[1], a[2], a[3]); break;
                case 5: console.log(a[0], a[1], a[2], a[3], a[4]); break;
                default:
                    throw "f() only supports up to 5 arguments";
            }
        }
    }
}

。 ..那只是丑陋。

* ES5添加绑定函数,这些函数是将值通过绑定附加到它们上:

* ES5 added bound functions, which are functions that have their this value attached to them via binding:

// Normal function
function foo() {
    console.log(this.name);
}

// Create a bound function:
var f = foo.bind(someObject);

如何调用 f ,它将调用 foo 设置为 someObject

It doesn't matter how you call f, it will call foo with this set to someObject.

* ES2015(又名ES6)添加了箭头功能。使用箭头函数, 根据函数的调用方式设置;相反,该函数从创建它的上下文继承 this

* ES2015 (aka ES6) added arrow functions. With arrow functions, this is not set by how the function is called; instead, the function inherits this from the context in which it was created:

// Whatever `this` is here...
var f = () => {                             // <== Creates an arrow function
    // Is what `this` will be here
};

当您执行类似 Array#forEach的操作时,箭头函数非常方便在对象方法中:

Arrow functions are really handy when you're doing something like Array#forEach within an object method:

this.counter = 0;
this.someArray.forEach(entry => {
    if (entry.has(/* some relevant something */)) {
        ++this.counter;
    }
});

这篇关于这个陈述有什么作用? console.log.bind(控制台)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆