开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js中的 this方法返回值

在JavaScript中，this关键字的值取决于函数的调用方式。以下是几种常见的情况以及this的返回值：

基础概念

this关键字在JavaScript中指向当前执行上下文的对象。它的值不是固定的，而是根据函数的调用方式动态决定的。

类型与应用场景

全局上下文：在全局执行上下文中（即任何函数体外部），this指向全局对象。在浏览器中，这通常是window对象。

console.log(this); // 输出: Window {...}

函数上下文：在普通函数中，this的值取决于函数的调用方式。

如果函数作为普通函数调用，this指向全局对象（在严格模式下为undefined）。

function foo() {
  console.log(this);
}
foo(); // 输出: Window {...}（非严格模式）或 undefined（严格模式）

如果函数作为对象的方法调用，this指向调用该方法的对象。

const obj = {
  method: function() {
    console.log(this);
  }
};
obj.method(); // 输出: { method: [Function: method] }

构造函数：当函数用作构造函数（使用new关键字）时，this指向新创建的对象实例。

function Constructor() {
  this.value = 42;
}
const instance = new Constructor();
console.log(instance.value); // 输出: 42

箭头函数：箭头函数没有自己的this绑定，它会捕获其所在上下文的this值。

const obj = {
  method: function() {
    const arrow = () => console.log(this);
    arrow();
  }
};
obj.method(); // 输出: { method: [Function: method] }

显式绑定：可以使用call、apply或bind方法显式地设置函数中的this值。

function foo() {
  console.log(this);
}
const obj = { key: 'value' };
foo.call(obj); // 输出: { key: 'value' }

遇到的问题及解决方法

问题：在回调函数中，this的值可能不是预期的对象。

原因：回调函数可能在不同的上下文中被调用，导致this的值改变。

解决方法：

使用箭头函数来保持this的值不变。

const obj = {
  value: 42,
  method: function() {
    setTimeout(() => {
      console.log(this.value); // 输出: 42
    }, 100);
  }
};
obj.method();

使用.bind()方法显式绑定this。

const obj = {
  value: 42,
  method: function() {
    setTimeout(function() {
      console.log(this.value); // 输出: 42
    }.bind(this), 100);
  }
};
obj.method();

了解这些基础概念和不同的使用场景可以帮助你更好地控制和预测this的行为，从而编写出更健壮的JavaScript代码。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

JS|函数的返回值

，而在上面的代码中，函数提供了‘aru’，结果自己却把该参数给输出了。...所以，接下来我会介绍一种逻辑更严谨的代码。解决方案 return语句有的时候，我们希望函数将返回值返回给调用者，此时通过使用return语句就可以实现。...函数的返回值格式 function 函数名(){ return 需要返回的结果;}函数名(); 函数只是实现某种功能，最终的结果需要返回给函数的调用者。是通过return来实现的。...只要函数遇到return就会把后面的结果，返回给函数的调用者。...num2){ return num1 + num2;}console.log(sum(1,2)) 结果输出为：3 由此可知，不要在函数的内部输出结果，应该return给函数的调用者。

11.4K1 0

JS中函数作为参数和返回值 15

say=function() { console.log("hello world"); } say(); let fn=say; fn(); // 将函数作为其他函数的参数

4.7K1 0

JS中的indexOf方法

大家好，又见面了，我是你们的朋友全栈君。 indexOf()简介 indexOf()是js中内置的方法之一，它的功能大家都很熟悉：简单来说就是得到数据的索引，对于正则不熟练的人，是个很不错的方法。...）注：（暂不讨论两个参数时(第二个参数为查询的起始位置)，以及lastIndexOf()） String类型使用indexOf(); String中的indexOf方法（话不多说直接上代码，不跟你多...()是对数据进行了隐式类型转换的，如果参数是数值它会转换为字符来进行查询然后返回索引，本质原因是什么呢，那就是我们js底层代码中String.prototype.indexOf()使用的是==进行比较判断...； Number类型的IndexOf() 醒醒，Number类型哪来的indexOf()方法，会直接报错的好吗，如果想对数值类型的进行查询索引，可以将数值转换为字符再进行查询，方法有很多： –...()是不会进行隐式类型转换的，也就是说Array.prototype.indexOf（）底层代码在实现的时候使用的是强等于=== 严格比较；总结 string中indexOf() 会将数值参数转换为字符再查询索引

5.3K4 0

PHP方法的返回值

PHP方法的返回值不仅是PHP，大部分编程语言的函数或者叫方法，都可以用return来定义方法的返回值。...从函数这个叫法来看，本身它就是一个计算操作，因此，计算总会有个结果，如果你在方法体中处理了结果，比如进行了持久化保存，那么这个函数就不用返回任何内容。...echo $a + $b; // 后面不会执行了 } var_dump(testC(1, 2)); // NULL 不用return或者直接return;都会返回NULL，return会阻断方法体中后续代码的执行...下面才是重头戏，在PHP7的新特性中，返回值声明是非常亮眼的一道风景。...那么定义了返回值类型声明有什么好处呢？我们在PHP方法参数的那点事儿有介绍过类型声明的好处，这里就不过多赘述了，不管是参数类型声明还是返回值类型声明，都是一样的。

7.7K3 0

controller方法的返回值

1 返回ModelAndView 需要方法结束时，定义ModelAndView，将model和view分别进行设置。...图片图片配置jsp前缀和后缀 2 返回void 在controller方法形参上可以定义request和response，使用request或response指定响应结果： 1、使用request...=utf-8"); response.getWriter().write("json串"); 3 返回字符串表示返回逻辑视图名：真正视图(jsp路径)=前缀+逻辑视图名+后缀图片通过形参中的

2K1 0

js中数组的splice方法_vue中splice方法

大家好，又见面了，我是你们的朋友全栈君。 JavaScript中的splice主要用来对js中的数组进行操作，包括删除，添加，替换等。...array.splice(index,num)，返回值为删除内容，array为结果值。 eg： <!...= ['a','b','c','d']; var removeArray = array.splice(0,2); alert(array);//弹出c,d alert(removeArray);//返回值为删除项...)，返回值为空数组，array值为最终结果值 eg: 的项） array.splice(index,num,insertValue)，返回值为删除内容，array为结果值。

3.9K1 0

JS中的数组方法

JS中的数组方法总结 Array.push() 向数组的末尾添加一个或者多个元素，并返回新的长度 let arr =[1,2,3]; console.log(arr.push(6)) //打印结果为...(arr) //打印结果 [1,2,3,4] Array.concat(arr1,arr2) 连接2个或者更多的数组，并返回连接后的新数组，该方法不会改变原数组 let arr1 = [1,2,3...this指向，因此如果想用thisValue参数必须使用function函数 Array.map() 对数组中的每个元素进行重新编辑，返回用编辑结果组成的新数组，传递的参数和forEach()一样...Array.reduce() 通过计算将数组计算为1个值，只执行arr.length-1次 arr.reduce(function(a,b,c,d)), 参数： a——初始值为数组第一个值，之后会赋值为每次循环的返回值...) //结果 2 Array.findIndex() 返回数组中符合条件的第一个元素的下标，若数组中没有元素符合要求则返回-1,不改变原数组 let arr = [1,2,3] console.log

6.2K2 1

Js中fetch方法

Js中fetch方法 fetch()方法定义在Window对象以及WorkerGlobalScope对象上，用于发起获取资源的请求，其返回一个Promise对象，这个Promise对象会在请求响应后被resolve...init: 一个配置项对象，包括所有对请求的设置。可选的参数有： method: 请求使用的方法，如GET、POST。...状态标记为 resolve，但是返回的Promise会将resolve的返回值的ok属性设置为false，仅当网络故障时或请求被阻止时，才会标记为reject。...Headers.get(): 以ByteString的形式从Headers对象中返回指定header的全部值。...Headers.has(): 以布尔值的形式从Headers对象中返回是否存在指定的header。 Headers.keys(): 以迭代器的形式返回Headers对象中所有存在的header名。

5.3K3 0

js中join方法

大家好，又见面了，我是你们的朋友全栈君。 js中的join方法 join方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。...大白话：join方法可以用符不同的分隔符来构建这个字串。join方法值接受一个参数，即用作分隔符的字符串，然后返回所有数组项的字符串。...var arr = ["red","yellow","blue"]; var array = []; 下面开始调用join方法 1 array = arr.join(undefined); console.log...因为join方法的参数不传或者传入undefined会默认用逗号分隔。...join参数使用” | “来分隔的，字符串是什么就用什么来分隔。

3.5K4 0

JS对象中的方法的this指向

// 对象里的方法写的是箭头函数，this始终访问全局 var name = "xiaoming"; var obj1...let getName11 = obj1.getName.bind(obj1); getName11(); // xiaoming // 对象的方法写的...function 声明，直接调用 this 指向对象本身，将调用的方法单独保存起来调用，this 指向全局，通过bind 改写 this 指向后，可以继续指向对象本身 var

3.3K1 0

js中的操作cookie的方法

在 JavaScript 中, 可以使用以下代码来读取 cookie： var x = document.cookie; cookie 的操作,添加，修改，删除等，没有提供对应的方法，需要自己去处理document.cookie...中的字符串。...，其中提供了许多操作Cookie的方法： //创建一个Cookie，属性默认 Cookies.set('password', '123456'); //创建一个Cookie，设置属性：有效天数，path...，一般会有八小时时差 Cookies.remove("password"); 我们可以发现js-cookie中的API的使用和jQuery Cookie是非常类似的，参数列表基本一致，因此使用起来也是上手很快...总结： jQuery Cookie、js-cookie的使用方法，两者的使用非常类似，大家也可以根据自己的喜欢来选择，无论哪种，都会比原生的js要方便。

5.2K4 0

JS中函数的本质，定义、调用，以及函数的参数和返回值

，外层不能访问里层的函数代码块中定义的函数：由于js中没有块级作用域，所以依然是处于全局作用域中都会出现预解析中函数被提前声明 if(true){ function fn1(){ } }...); console.log(add(3,4));//在全局无法访问到函数内部的函数add 方法的调用：对象中的方法，使用对象.方法名进行调用 var operation={ add:function...对象中要使用链式调用，则方法中需要返回当前对象 var operation={ add:function(n1,n2){ console.log(n1+n2); return this...：构造函数命名时一般首字母大写调用时用new+函数名，返回值是一个对象 function Person(){ } var obj=new Person(); js中内置的构造函数，常见的有： Object...return：表示函数结束将值返回什么可以做返回值：直接return ，返回值是undefined 数字字符串：alert() 输出的都是字符串，会默认调用.toString() 方法布尔值

17.6K2 0

JS中添加元素的方法

大家好，又见面了，我是你们的朋友全栈君。 append():前面是被插入的对象。最后面增加子元素，父子级关系。 appendto():后面是被插入对象。最后面增加子元素，父子级关系。...DOCTYPE html> js中常用追加元素的几种方法 js...append("我是子元素append"); }); //appendTo(),将子元素追加到父级的最后...p class='siblings'>我是同级元素before"); }); //insertAfter(),将元素追加到指定对象的后面

9.8K1 0

JS中遍历对象的方法讲解

---在JavaScript中，有几种常用的方法可以用来遍历对象：for...in循环使用for...in循环可以遍历一个对象中的所有可枚举属性。它会将属性名逐个赋值给循环变量，并执行循环体内的代码。...如果只想遍历对象自身的属性，可以通过hasOwnProperty()方法来判断属性是否为对象自身的属性。...for (let key in obj) { if (obj.hasOwnProperty(key)) { console.log(key, obj[key]); }}在遍历过程中，属性名会被赋值给循环变量...Object.keys()和Object.getOwnPropertyNames()方法只会返回对象自身的属性（包括可枚举和不可枚举属性），而不会返回继承的属性。...你可以选择其中一种方法根据需要遍历对象的属性。Object.keys()方法结合forEach()循环Object.keys(obj)会返回一个包含对象自身可枚举属性的数组。

5023 0

原生JS中的拖拽方法继承

给大家分享一个用原生JS编写的拖拽及拖拽方法继承的小Demo，代码如下。中的拖拽方法继承 #div1 { width: 100px; height: 100px;...that.fnDown(ev); return false; }; }; // 拖拽父级对象原型上添加鼠标落下时的方法...= function () { that.fnUp(); }; }; // 拖拽父级对象原型上添加鼠标移动时的方法...new Drag('div1'); // div2在拖动过程中通过将方法改写加上边界限制 new LimitDrag('div2

5K2 0

js中数组的sort()方法排序

返回一个数组的引用，不会创建新的数组对象而是将原数组改变成排序后的数组。无参调用：如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，按照字符编码的顺序进行排序。...带参调用：如果想要自己规定排序方式，就需要在sort()方法中提供一个比较函数，该函数要比较两个值即有两个形参a 和 b，函数执行时浏览器会将数组中的元素依次作为实参传入，返回一个用于说明这两个值的相对顺序的数字...sort（）方法会根据函数返回值来进行数组元素的交换。返回值如下：若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。若 a 等于 b，则返回 0。...三.对sort(sortby)方法的理解： sort()方法主要依靠其回调函数来进行排序，回调函数中需要两个参数，在执行sort()方法时会调用回调函数，这时会将调用sort()方法的数组中的元素作为实参两两依次作为回调函数实参传入...以上是关于JS中sort函数的小结，后续遇到新的问题再继续更新！

6.4K2 0

js --- return返回值闭包

有权访问另一个函数作用域内变量的函数都是闭包。这里 inc 函数访问了构造函数 a 里面的变量 n，所以形成了一个闭包。...console.log(n); } return inc; } var c = a(); c(); //控制台输出1 c(); //控制台输出2 var c = a()，这一句 a()返回的是函数...inc，那这句等同于 var c = inc; c()，这一句等同于 inc(); 注意，函数名只是一个标识（指向函数的指针），而()才是执行函数。

4.4K2 0

JS中的字符串方法

JS中的字符串方法总结 charAt(i) 将字符串中下标为 i 的字符返回，下标从0开始。...编码转换为字符串返回 console.log(String.fromCharCode(97,98,99)) // ‘abc’ str.indexOf(start) 查询一个字符或一段字符串在总字符串中第一次出现的下标位置...(‘o’)) // 7 match() 根据正则表达式在字符串中搜索匹配项，没有匹配到的话返回一个信息数组或者null let zz = /.jpgKaTeX parse error: Can't...(zz)) // 4 str.slice(参数1,参数2) 提取字符串中的某个部分（不包括end），返回新的字符串 let str = ‘hello world’ console.log(str.slice...() 将字符串中的字母变为小写 let str = ‘HELLO WORLD’ console.log(str.toLowerCase()) //‘hello world’ toUpperCase

4K1 0

JS中的call()和apply()方法

JS中的call()和apply()方法 1、方法定义 call方法: 语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义：调用一个对象的一个方法，...说明： call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。...4 } 5 function sub(a,b) 6 { 7 alert(a-b); 8 } 9 10 add.call(sub,3,1); 这个例子中的意思就是用...add 来替换 sub，add.call(sub,3,1) == add(3,1) ，所以运行结果为：alert(4); // 注意：js 中的函数其实是对象，函数名是对 Function 对象的引用...Animal对象代替this对象，那么 Cat中不就有Animal的所有属性和方法了吗，Cat对象就能够直接调用Animal的方法以及属性了.

2.2K3 0

js中改变原数组的方法

改变原数组的方法 1. push( ) :数组的尾部添加一个或多个元素并返回新的长度 // Base var arr = [123, 'hello', true, function...并返回新的长度 // Base var arr = [123, 'hello', true, function () { }, {}]; arr.unshift('new data') console.log...('a', 'b') // 一次添加多个值 console.log(arr); // [ 'a', 'b'，123, 'hello', true, ƒ, {…}] 3. pop( ) :删除数组的最后一个元素并返回删除的元素...Apple", "Strawberry"]; arr.pop() console.log(arr); // ["Banana", "Orange", "Apple"] 4. shift( ) :删除数组的第一个元素并返回删除的元素...）item1,item2,item3…表示要添加到数组的新元素 var arr= ["Banana", "Orange", "Apple", "Strawberry"]; arr.splice(2,1,

771 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭