this的几种使用场景

  

首先,this要在执行时才能确认值,定义时无法确认.而在es6的箭头函数中,this则是在定义时所在的对象

this对象有四种使用的场景:

第一种情况: 全局下this  

由于全局下的变量是window的属性,函数是window的方法

所以

栗子:

function fn1 (){

  return this

}

console.log(fn1())  //window

注意: 在严格模式下 “use strict”  this是undefined

第二种情况:构造函数

(1).当函数作为构造函数调用时,this代表new出来的对象;

(2).如果没有使用new而是直接调用函数,this===window;

(3).不仅仅是构造函数的prototype,即便是在整个原型链中,this代表的也是当前对象的值;

栗子:

function Foo (name){

  this.name = name ;

  console.log(this)

}

var foo = new Foo('Emma');  //Foo {name: "Emma"} 

Foo() //window

第三种情况:函数作为对象的一个属性

这里有两种情况

(1).函数作为对象的一个属性被调用的时候,this指向的是该对象;

(2).函数作为对象的一个属性被赋值到另一个变量中调用,this===window

栗子:

 

var obj = {

  x :10,

  fn:function(){

    console.log(this)

  }

}

obj.fn()   //当前对象

var newFn = obj.fn;  newFn() //window

第四种情况: 函数用apply() call() bind()调用时,this取得是传入的对象

他们的具体使用方法及不同点单独总结了

https://www.cnblogs.com/emma-zhao/p/10687992.html

转载于:https://www.cnblogs.com/emma-zhao/p/10688457.html

在 JavaScript 中,函数的 `this` 指向取决于函数的调用方式,而不是定义时的位置。为了改变函数内部 `this` 的指向,JavaScript 提供了多种方式,主要包括以下几种: ### 使用 `call` 方法 `call` 方法允许在调用函数时指定其执行上下文,即 `this` 的指向。它会立即执行函数,并将第一个参数作为 `this` 的值,后续参数作为函数的参数列表。 ```javascript window.color = "red"; var o = { color: "blue" }; function sayColor() { alert(this.color); } sayColor.call(o); // "blue" ``` 通过 `call`,函数 `sayColor` 的上下文被绑定到对象 `o`,因此 `this.color` 输出的是 `"blue"` [^1]。 ### 使用 `apply` 方法 `apply` 方法与 `call` 类似,同样用于改变函数的上下文,但其参数是以数组形式传递的。这种方式在需要动态传递参数时非常有用。 ```javascript function sum(a, b) { return a + b; } const context = { value: 42 }; function logValue() { console.log(this.value); } logValue.apply(context); // 42 ``` 在这里,`apply` 将 `logValue` 函数的上下文设置为 `context` 对象,因此 `this.value` 输出 `42` [^1]。 ### 使用 `bind` 方法 `bind` 方法不会立即调用函数,而是返回一个新的函数,该函数的 `this` 被永久绑定到指定的对象。这种方式适用于需要延迟调用或作为回调函数使用场景。 ```javascript function Person() { this.name = 'kobe'; this.sex = '男'; this.age = '41'; } function Star(a, b) { console.log(this); console.log(a + b); } var fn = Star.bind(Person, 1, 3); fn(); // this 指向 Person 构造函数 ``` 通过 `bind`,函数 `Star` 的上下文被绑定到 `Person` 构造函数,即使 `fn()` 被单独调用,`this` 仍然指向 `Person` [^3]。 ### 使用箭头函数 箭头函数没有自己的 `this`,它的 `this` 是从外层作用域继承而来的。这种特性使得箭头函数在某些场景下非常有用,尤其是在需要保持外层上下文的情况下。 ```javascript const obj = { value: 'Hello', printWithRegularFunction: function() { setTimeout(function() { console.log('普通函数:', this.value); // this 指向全局对象(window) }, 1000); }, printWithArrowFunction: function() { setTimeout(() => { console.log('箭头函数:', this.value); // this 指向 obj 对象 }, 1000); } }; ``` 在 `printWithArrowFunction` 中,箭头函数内部的 `this` 指向 `obj`,而普通函数中的 `this` 指向全局对象 [^4]。 ### 函数作为对象方法调用 当函数作为对象的方法被调用时,`this` 的上下文是调用该方法的对象。但如果将函数赋值给一个变量并独立调用,则 `this` 会指向全局对象(如 `window`)。 ```javascript var obj1 = { xingming: 'xiaoming', age: 12, games: ['LOL'], consoleHello: function() { console.log('我的名字是' + this.xingming); console.log(this); } }; obj1.consoleHello(); // this 指向 obj1 var fn = obj1.consoleHello; fn(); // this 指向 window ``` 在这种情况下,`this` 的指向取决于调用方式 [^2]。 ### 函数内部 `this` 的指向 在构造函数中,`this` 指向新创建的对象。而在嵌套函数中,如果函数独立调用,`this` 会指向全局对象,而不是外层函数的上下文。 ```javascript const input = document.getElementById('input'); const btn = document.getElementById('btn'); const obj = { value: 'Hello', printWithRegularFunction: function() { setTimeout(function() { console.log('普通函数:', this.value); // this 指向全局对象(window) }, 1000); }, printWithArrowFunction: function() { setTimeout(() => { console.log('箭头函数:', this.value); // this 指向 obj 对象 }, 1000); } }; btn.addEventListener('click', () => { obj.value = input.value; obj.printWithRegularFunction(); obj.printWithArrowFunction(); }); ``` 箭头函数在此场景中能够保持外层上下文的 `this`,而普通函数则需要手动绑定上下文 [^4]。 ### 总结 JavaScript 提供了多种方式来改变函数内部 `this` 的指向,包括 `call`、`apply`、`bind` 和箭头函数。每种方式都有其适用场景,开发者可以根据具体需求选择合适的方法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值