方法上的Function.prototype不传递对象的this
基础概念
在JavaScript中，Function.prototype 是所有函数对象的原型，它包含了许多用于操作函数的方法，例如 call()、apply() 和 bind()。这些方法允许你调用函数，并显式地指定 this 的值。
问题描述
当你在方法上使用 Function.prototype 的某些方法时，可能会遇到 this 上下文不正确传递的问题。这是因为 this 的值取决于函数的调用方式。
原因
this 的值在JavaScript中是动态的，它取决于函数的调用方式。当你直接调用一个函数时，this 通常指向全局对象（在浏览器中是 window，在Node.js中是 global）。而当你通过方法调用时，this 通常指向调用该方法的对象。
解决方法
使用 call() 或 apply()
你可以使用 call() 或 apply() 方法来显式地指定 this 的值。
function greet() {
console.log(`Hello, ${this.name}`);
}
const person = { name: 'Alice' };
// 使用 call() 方法
greet.call(person); // 输出: Hello, Alice
// 使用 apply() 方法
greet.apply(person); // 输出: Hello, Alice使用 bind()
bind() 方法创建一个新的函数，当这个新函数被调用时，它的 this 值被设置为提供的值。
function greet() {
console.log(`Hello, ${this.name}`);
}
const person = { name: 'Alice' };
const greetPerson = greet.bind(person);
greetPerson(); // 输出: Hello, Alice箭头函数
箭头函数不会创建自己的 this 上下文，它会捕获其所在上下文的 this 值。
const person = {
name: 'Alice',
greet: function() {
setTimeout(() => {
console.log(`Hello, ${this.name}`);
}, 1000);
}
};
person.greet(); // 输出: Hello, Alice应用场景
这种问题通常出现在回调函数、事件处理程序或异步操作中，其中 this 的上下文可能会丢失。
示例
假设你有一个对象，它有一个方法需要在回调函数中使用：
const person = {
name: 'Alice',
greet: function() {
setTimeout(function() {
console.log(`Hello, ${this.name}`);
}, 1000);
}
};
person.greet(); // 输出: Hello, undefined在这个例子中，setTimeout 的回调函数中的 this 指向全局对象，而不是 person 对象。你可以使用上述方法来解决这个问题：
const person = {
name: 'Alice',
greet: function() {
setTimeout(() => {
console.log(`Hello, ${this.name}`);
}, 1000);
}
};
person.greet(); // 输出: Hello, Alice参考链接
相关·内容
1回答
我只是好奇是否可以将一个对象包含到函数原型链中。我的意思是：
var test = function() { return 'a'; };
console.log(test.bind(this)); // return new bound function
// changing the prototype
// in console the prototype is really set as needed
// test => new object => function prototype => Object prototype
var F = fu
浏览 1提问于2012-05-15得票数 3
回答已采纳
约翰·雷希( John )
最后，一个长期存在(而且非常烦人)的错误已经得到解决:在这种情况下，null或未定义被胁迫成为全局对象。严格模式现在可以防止这种情况发生，并抛出异常。
(function(){ ... }).call( null ); // Exception
他指的是什么虫子？
浏览 1提问于2012-12-21得票数 2
当使用函数对象作为构造函数时，将保持正确的原型链，如第1点和第2点所标记的那样。
但是，如下面的代码所示，新实例原型跳过Function.prototype并直接从Object.prototype.继承有具体的原因吗？
Function.prototype.extraFun = function(){console.log('funny function')};
function Thing(name){
this.name = name;
}
Thing.prototype.specs = function(){
return `name: ${thi
浏览 7提问于2021-09-09得票数 1
下面的示例引用MDN：
Function.prototype.construct = function(aArgs) {
console.warn('Function construct')
var oNew = Object.create(this.prototype);
this.apply(oNew, aArgs);
return oNew;
};
function MyConstructor() {
console.warn('MyConstructor')
for (var nProp = 0; nProp < ar
浏览 1提问于2017-10-14得票数 1
回答已采纳
2回答
如果我们创建这样的函数：
function Rabbit() {}
我们看到它继承的对象与Function继承的对象相同。
Rabbit.__proto__ === Function.__proto__
这个更高的物体是什么？如果我们尝试记录它，它看起来是：ƒ () { [native code] }。Rabbit不应该继承Function对象，因为它是一个函数吗？有人能解释我哪里错了吗？
浏览 2提问于2019-10-25得票数 1
回答已采纳
为什么Object._proto_函数给我错误？
alert(Object.__proto__ ); // clearly Object.__proto__ is a function right?
alert(typeof Object.__proto__); // clearly Object.__proto__ is a function right?
alert(Object.__proto__ instanceof Function); // !
浏览 9提问于2011-05-11得票数 3
回答已采纳
不知道我做错了什么，但我一直在我的控制台收到以下消息。如有任何指导，将不胜感激。另外，如果你们对如何处理这件事有更好的建议，请告诉我！
未定义的TypeError:未定义不是函数
var animEngine = {};
animEngine.init = function () {
'use strict';
var elem = function(){};
elem.prototype = {
objType : '',
objClass : '',
objBack
浏览 1提问于2014-06-06得票数 0
我想在我的角分量中定义称为run的全局新函数，如下所示：
Function.prototype.run = function (delay: number) {
// some content;
};
..。但是编译器会生成一个错误，如果我只使用普通的java脚本执行相同的代码，然后使用Property 'run' does not exist on type 'Function'.编译它，那么编译就不会有任何问题。有人知道为什么吗？
浏览 6提问于2022-03-28得票数 0
回答已采纳
向版主澄清，因为一些版主在浏览问题时速度有点快，我必须强调，我不是在问为什么要使用Object.prototype.hasOwnProperty.call而不是myObject.hasOwnProperty。魔鬼就在细节里。
禁止使用来自Object原型的内置。它是针对这样的代码提供的：
function serverMethodToParseClientInput(json){
const o = JSON.parse(json);
if (o.hasOwnProperty("foo")) {
doSomethingMeaningful();
}
}
浏览 1提问于2019-10-25得票数 3
回答已采纳
因此，只要Javascript中的任何内容实际上是一个对象，是什么使对象表现为一个函数？哪些内部属性和标签使对象表现为我们可以调用的对象，而不是仅仅使用它来存储值？
浏览 9提问于2020-02-03得票数 4
回答已采纳
4回答
每个函数对象都有__proto__作为其内部属性。它们也有prototype属性。因为prototype也是一个对象，所以它也有一个__proto__属性。我的问题是，原型内部和函数对象中的__proto__属性是否都指向Function.prototype
浏览 2提问于2013-01-28得票数 1
我是JavaScript的新手，我正在学习道格拉斯·克罗克福德的书“美好的部分”。
上面写着：
每个函数对象也使用一个prototype属性创建。它的值是一个具有constructor属性的对象，其值是函数。这与指向Function.prototype__的隐藏链接不同。
我知道函数对象是链接到Function.prototype的，但是上面的一行是什么意思？
有人能帮我简化一下吗？
浏览 1提问于2013-09-20得票数 5
回答已采纳
为什么如果使用F - simple函数：
F.prototype !== F.__proto__
但
Function.prototype === Function.__proto__
浏览 0提问于2017-05-14得票数 1
在Chrome中，
Object.__proto__返回ƒ() {本机代码}
鉴于
Function.__proto__.__proto__.__proto__返回null
同样，typeof对象也是函数。
如果对象的类型是函数，那么JavaScript中的所有东西不都是函数吗？
我是新手，请帮帮我。
浏览 8提问于2021-04-08得票数 1
我在试着把这事办好。
$.fn.createDelegate = function(scope){
var fn = this;
return function() {
return fn.apply(scope, arguments);
}
}
下面的版本可以工作，但我认为它们都是一样的。第一个是编写第二个的简写方式。也许我的想法是错误的。
Function.prototype.createDelegate = function(scope){
var fn = this;
return function() {
return fn.appl
浏览 1提问于2011-09-09得票数 3
回答已采纳
在Javascript中，函数是对象。然而，函数的typeof返回的是function，而不是的object。
这个function类型实际上是某种可以确定的object包装器吗？或者在Javascript中，function实际上与object的根本不同吗？
我理解函数是有效的和实际的对象。但是，根据定义，它们实际上与Javascript中的对象完全分离，还是有一种以编程方式显示函数所由的对象的方法？
浏览 5提问于2022-03-30得票数 1
我正在学习Javascript，最近我学到了一些关于原型的知识。我对原型的理解是，它们实际上是内存中的对象，每个新创建的对象都有一个指针。创建新对象时，用于创建该对象的构造函数将新创建的对象的原型指定为构造函数的原型。换句话说，如果我有一个圆圈构造函数，并且我创建了一个新的循环对象，那么这个新对象和圆圈构造函数都指向相同的引用。
我的问题是:如果原型应该引用创建对象的“父”对象，例如构造函数函数，为什么构造函数函数(即函数和对象)不指向“函数”构造函数作为它们的原型？如果您尝试创建像这样的新构造函数：
function Circle() {}
let c1 = new Circle();
您将
浏览 3提问于2020-03-31得票数 0
回答已采纳
这个 on Function.prototype对象列出了本地属性和方法，但是当我在火狐或Chrome的控制台中回显Function.prototype时，它会输出"function () { }"。
为什么它不输出MDN文章中列出的所有属性和方法？
浏览 2提问于2016-10-08得票数 0
回答已采纳
>Object.getPrototypeOf(Object)
[Function: Empty]
>Object.prototype
{}
为什么我得到了不同的结果？但如果我用：
>Object.getPrototypeOf({})
{}
百事大吉。我错过了关于getPrototypeOf的任何一点吗？
浏览 11提问于2014-10-08得票数 0
回答已采纳
从窗口对象创建如下函数时，
function userInfo() {};
为什么userInfo.constructor显示函数而不是对象，因为函数是对象？
它甚至在使用以下命令时显示函数而不是对象，
Function.constructor
浏览 0提问于2016-02-29得票数 5
回答已采纳
以下Javascript代码没有预期的效果：
Function.prototype = {test："foo"}
显然，Function.prototype并没有因任务而改变(至少在火狐上是如此)。为什么会这样呢？有什么办法可以推翻它吗？
浏览 4提问于2013-09-23得票数 0
回答已采纳
我在深入研究Javascript原型链。
为了记录我的发现，我制定了以下方案：
虽然大多数概念都很清楚，但我只剩下两个相关的问题。与其把它们分开，我猜想把它们集中在这个问题上可能会更好：
为什么Function.prototype是类型函数，而不是对象？
typeof Function.prototype; //"function"
Function.prototype是否是JS中的“唯一函数”，因为它没有自己的prototype属性，就像其他函数一样？(是否有一个被普遍接受的“名称”来指它？)
浏览 3提问于2015-10-04得票数 28
回答已采纳
在Node.js中(通过)运行以下代码会产生不一致的结果：
function F() {}
F.__proto__ == Function.prototype
为什么这有时会导致true，有时会导致false？有正确的答案吗？
浏览 0提问于2020-01-11得票数 0
我正在试图找出我写的函数的原型链。
function Animal(voice)
{
this.voice = voice|| 'meaw'
}
Animal.prototype.speak =function() {
console.log(this.voice);
}
我知道动物函数有一个prototype属性，指向它的prototype对象。它的原型对象具有指向后向的构造函数和指向对象原型的__proto__属性
我知道每个函数对象都是从函数的对象 prototype 继承的，它们继承了对象的对象prototype，包括__proto__属性，现在
浏览 0提问于2016-02-11得票数 2
回答已采纳
Object.getPrototypeOf(..)
返回指定对象的原型(即内部[ prototype ]属性的值)。所以，下面的内容是有意义的
const prototype1 = {};
const object1 = Object.create(prototype1);
console.log(Object.getPrototypeOf(object1) === prototype1); // logs true
就算是这个也没问题
function fn() {
}
Object.getPrototypeOf(fn) == Function.prototype // logs true
浏览 8提问于2022-06-11得票数 0
回答已采纳
我在fn.bind()的中看到了如下所示：
if (!Function.prototype.bind) {
Function.prototype.bind = function(oThis) {
if (typeof this !== 'function') {
// closest thing possible to the ECMAScript 5
// internal IsCallable function
throw new TypeError('Function.prototype.bind - what
浏览 1提问于2016-01-19得票数 12
2回答
对象与原型的区别
、、
为何：
console.log(Object.hasOwnProperty("hasOwnProperty"));
返回假的，但：
console.log(Object.prototype.hasOwnProperty("hasOwnProperty"));
回复真实的陈述？
我意识到hasOwnProperty是在对象中预先构建的方法，但我想我的问题是对象和对象的原型之间有什么区别。
他们不是一样的吗？
当我们在第一行代码中引用对象时，不是指上面第二行代码中的同一行代码吗？
编辑:修正了以下两行代码：
console.log(Object.hasOw
浏览 3提问于2013-02-11得票数 0
回答已采纳
1回答
我已经研究了好几个小时了。我想知道预定义的方法调用()驻留在哪里。在创建构造函数之后，
function computer() {
this.name = "my computer";
}
在我console.log(computer.prototype)之后，我找到一个构造函数属性和一个prototype属性。
方法call()不是在这个原型中定义的，它也不是在原型的原型中定义的。但我看到有一个构造函数属性，正如文档所述，它包含对函数本身的引用。这允许我查看计算机构造函数(因为这个结构属性包含对它的引用)。
我可以看到，实际上在计算机构造函数中有两个原型，第一
浏览 5提问于2022-05-20得票数 0
我想知道Array.prototype.isPrototypeOf和Array.isPrototypeOf之间的区别是什么，我认为它应该同样工作，因为我认为它会引用相同的方法，isPrototypeOf，但是看起来我错了。有人能向我解释一下为什么会这样吗？
const exampleArray = [1, 2, 3];
console.log(Array.prototype.isPrototypeOf(exampleArray));
console.log(Array.isPrototypeOf(exampleArray)); // Why this statement returns f
浏览 2提问于2020-10-17得票数 23
回答已采纳
在页面中，它写成如下：
函数对象继承自Function.prototype。不能修改Function.prototype。
或者在javascript中，除了继承和原型链之外，没有其他类，构造函数实际上是其中的函数：
function AclassName(){
return 2;
}
// AclassName ---> Function.prototype ---> Object.prototype ---> null
我认为扩展类原型是可能的，就像：
AclassName.prototype.color = "somevlue";
我不
浏览 0提问于2016-01-20得票数 1
回答已采纳
我对Javascript还不熟悉，所以如果这有一个微不足道的答案的话，我很抱歉。
根据ECMAScript语言规范，如果val的返回类型为Object (implements [[Call]])，则结果是字符串"function“。我不明白的是，为什么在下面的代码中，新创建的对象的类型不是“函数”：
function FunctionCreator(){}
FunctionCreator.prototype = Function.prototype;
let obj = new FunctionCreator();
console.log(typeof obj); // obje
浏览 2提问于2020-06-18得票数 2
回答已采纳
如果您试图打印出一个常规对象的__proto__属性，比如{}.__proto__或foo.__proto__，您将得到[object object]；这个[object object]是另一个对象的原型。但是，如果您试图打印出任何函数的__proto__属性，它将为您提供function () { [native code] }。那是为什么？它不应该返回Function继承的对象的原型吗?这个对象应该是一个对象，而不是另一个函数(比如function(){native code]})。一个函数的__proto__怎么可能是另一个函数，而不是像其他原型那样的对象呢？
*我知道应该使用Objec
浏览 2提问于2017-09-09得票数 1
回答已采纳
我知道Object.prototype.proto = null是链的末尾(浏览器控制台是这样说的)。
在MDN站点中，位于Object.prototype页面：
在页面底部，在“继承：”下，您将看到"Function“，下面是可扩展的属性和方法。据我理解，它说Object.prototype继承了Function.prototype.bind()等方法
我可以理解对象构造函数共享非原型属性/方法(例如调用方属性)，因为它是由函数构造函数fn构造的。但是，当Object.prototype.proto为null时，Object.prototype如何从Function.prototyp
浏览 6提问于2014-01-02得票数 1
回答已采纳
根据，函数继承自Function，Function从Function.prototype继承：
但是，全局Function对象没有自己的方法或属性，因为它本身就是一个函数，因此它通过Function.prototype的原型链继承了一些方法和属性。
那么，Function.prototype有什么意义呢？为什么不将其属性移动到Function，并将Function.prototype设为undefined？函数将从Function派生而来。
Object等也是如此。
浏览 8提问于2015-11-23得票数 6
回答已采纳
我正在读一本书"Javascript:美好的部分“。
现在我正在阅读关于增强类型的章节：
Function.prototype.method = function (name, func) {
this.prototype[name] = func;
return this;
};
更新：
为什么下面的代码不工作？
js> Function.prototype.method("test", function(){print("TEST")});
typein:2: TypeError: this.prototype is undefin
浏览 2提问于2012-02-08得票数 5
回答已采纳
1回答
我正在做一个涉及从其他函数构造函数的项目。我有过写一个类来简化事情的想法，但如果不借助__proto__，我就不能让它工作。
这基本上就是我的愿景。
function MyFunction () {
// ...
}
var myFn = new MyFunction();
myFn(); // executes without error
myFn instanceof MyFunction; // returns true
下面的代码就是使用__proto__完成这项工作的
function MyFunction () {
var fn = function () { re
浏览 0提问于2012-11-05得票数 2
回答已采纳
我看到了这个漂亮的图表，我在我的Chrome浏览器上做了一些测试，但我不知道如何解释：
> Function.prototype
function Empty() {}
> Function.__proto__
function Empty() {}
> typeof(Empty)
"undefined"
什么是function Empty() {}，为什么Function.prototype是function而不是像Object.prototype一样的object
从上图可以看出，JavaScript中的一切似乎都是从Object.p
浏览 1提问于2011-10-07得票数 29
回答已采纳
如果你看看，上面写着Object.Create()
Object.create()方法使用指定的prototype对象和属性创建一个新对象。
我认为这是模棱两可的，因为它没有说明修改了哪个prototype属性(所有函数都有内部[[Prototype]]或可公开使用的Prototype )。应该在文档中修复它，还是我不知道术语？
浏览 4提问于2015-10-14得票数 4
Function.prototype // function Empty() {}
这有什么意义？例如，如果我们使用Number对象，我们可以看到他的原型(Number.__proto__)是Function.prototype，它包括apply和call之类的方法。如果Number的原型是一个空函数而不是与所有其他原型一样的常规原型对象，我如何使用Number.apply(..)？(数字原型、字符串原型、任何其他自定义原型都是对象。甚至Object.prototype也是一个对象)。
在那之后，Object.__proto__ == Function.prototype又有什么意义呢？对象应
浏览 5提问于2013-07-27得票数 1
回答已采纳
我已经在Function中添加了一个使用Function.prototype.func = ...的函数，但在Firefox中还没有添加console.log
Function.prototype.func = function () { return this.toString(); };
alert(typeof console.log.func); // in FF: undefined, in Chrome: function
这是一个bug，或者有什么原因吗？
浏览 0提问于2013-05-04得票数 6
回答已采纳
构造函数：
function Team (type) {
this.type = type;
}
//this will output this empty object inherited from Object.property
console.log(Team.prototype);
-> Team {}
//this one outputs nothing in my console
console.log(Object.getPrototypeOf(Team));
//is it inheriting from this one, the one for all fun
浏览 0提问于2015-03-13得票数 1
假设我们有以下代码：
"use strict";
function Student() {}
Student.prototype.sayName = function () {
console.log(this.name);
};
function EighthGrader(name) {
this.name = name;
this.grade = 8;
}
Object.setPrototypeOf(EighthGrader, Student.prototype);
const carl = new EighthGrader("carl"
浏览 1提问于2022-07-31得票数 0
回答已采纳
为什么在JavaScript中Object instanceof Function和Function instanceof Object都返回true
我在Safari WebInspector中尝试过。
浏览 0提问于2014-05-13得票数 40
我想对BOM的结构有一个清晰的理解。
问题1：例如，我有一个html文档，只有一个元素<p id="1"> </p> iside <body></body>。当浏览器对html文档进行分析时，它开始在BOM树中构建DOM树，并且我的段落元素被转换成一个p对象，该对象被放置在DOM树的确定位置--window.document.lastChild(I have got the html object).lastChile(I have got the html object).firstChild(I have got the p
浏览 0提问于2016-07-01得票数 1
> Function.call == Function.prototype.call
true
> Function.prototype == Function
false
为什么Function.prototype.*方法以Function.*的形式存在？这似乎不一致。
任何其他主要类型都不是这样(Array.slice不存在，但Array.prototype.slice存在)。
浏览 0提问于2016-01-15得票数 11
回答已采纳
我想了解函数和javascript中函数之间的关系。
让我举个例子：
Function.prototype.bind // function () { [native code] }
var foo = function () {};
foo.bind; //function () { [native code] }
我的问题是
Function.prototype.bind和foo.bind指的是相同的代码吗？
如果是，谁能给我解释一下关系？
浏览 4提问于2012-09-18得票数 2
回答已采纳
1回答
这里有一个对象布局图，很好地解释了javascript中的原型链。但当涉及到以下几个方面的关系时，我有点困惑：
函数对象(){}
Object.prototype
函数函数(){}
Function.prototype
我的问题是:在上述四个要素中，哪一个是第一位的？因为我在他们中间看到了一个循环。
函数Object.____proto____ -> Function.prototype
Function.prototype.____proto____ -> Object.prototype
Object.prototype.const
浏览 1提问于2014-05-19得票数 1
在试图更好地理解javascript背后的原型时，我偶然发现了以下内容，到目前为止我还无法理解。
我知道函数是第一类对象，但我不明白为什么在Function.prototype上设置了属性后，对象会获得这个属性
Function.prototype.foo = 'bar';
Object.foo // Object now has this property and returns 'bar'
Object.foo === Function.prototype.foo // returns true
浏览 0提问于2012-07-10得票数 3
回答已采纳
对象没有它自己的方法调用，所以它从proto获得它，但是为什么结果是不同的呢？
// Look at results in your browser's console
console.log(
Object.call(null,2), // Number {2}
Object.__proto__.call(null,2), // undefined
Object.call(null,''), // String {""}
Object.__proto__.call(null,'') // undefined
);
浏览 3提问于2019-12-10得票数 2
回答已采纳
我有这段代码，我想知道为什么boy.new2是未定义的？
Object.prototype.new1 = 'h1';
Function.prototype.new2 = 'h2';
function person(){
}
var boy = new person();
console.log(boy.new1); //h1
console.log(boy.new2); //undefined
浏览 6提问于2015-03-12得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
