js 里面的this

在js里面对于this的定义是this是在执行上下文创建时确定的一个在执行过程中不可更改的变量。
this只有在函数调用阶段确定,也就是执行上下文创建的阶段进行赋值,保存在变量对象中。这个特性也导致了this的多变性,所以在函数调用方式不同时也会导致this的指向不定。
严格模式:
var a = 1;
function foo() {
‘use strict’;
var a = 2;
return this.a;
}
foo();
this是undefined
非严格:
var a = 1;
function foo() {
var a = 2;
return this.a;
}
foo();//1
this就是window
所以我们很容易得出结论
当函数独立调用的时候,在严格模式下它的this指向undefined,在非严格模式下,当this指向undefined的时候,自动指向全局对象(浏览器中就是window)

作为构造函数

何为构造函数?所谓构造函数就是用来new对象的函数,像Function、Object、Array、Date等都是全局定义的构造函数。其实每一个函数都可以new对象,那些批量生产我们需要的对象的函数就叫它构造函数罢了。注意,构造函数首字母记得大写

prototype对象的方法的this指向实例对象,因为实例对象的proto已经指向了原型函数的prototype。这就涉及原型链的知识了,即方法会沿着对象的原型链进行查找。

ES6的箭头函数

var a = 1;
var obj = {
a: 2
};
var fun = () => console.log(this.a);
fun();//1
fun.call(obj)//1

箭头函数会捕获其所在上下文的 this 值,作为自己的 this 值,也就是说箭头函数的this在词法层面就完成了绑定。apply,call方法只是传入参数,却改不了this。

使用apply,call来解决this

var a = 1;
var obj = {
a: 2,
b: function() {
return this.a;
}
}
obj.b()
obj.b.call(obj)

这时候我们就可以解释下,为啥说在非严格模式下,当函数this指向undefined的时候,会自动指向全局对象,如上,在非严格模式下,当调用fun.call(undefined)的时候打印出来的依旧是1,就是最好的证据apply,call方法只是传入参数,却改不了this。

JavaScript 中,`this` 是一个非常重要的关键字,它指向函数执行时的上下文对象。理解 `this` 的指向规则对于编写高效、可维护的代码至关重要。以下是 `this` 的四种主要绑定规则及其详细解释。 ### 默认绑定(Default Binding) 在独立函数调用的情况下,没有明确的上下文对象时,`this` 会绑定到全局对象(在浏览器环境中是 `window` 对象)。例如: ```javascript function sayHi() { console.log(this); } sayHi(); // 非严格模式:window;严格模式:undefined ``` 在这种情况下,如果代码运行在非严格模式下,`this` 会指向全局对象 `window`;而在严格模式下,`this` 为 `undefined` [^5]。 ### 隐式绑定(Implicit Binding) 当函数作为对象的方法被调用时,`this` 会指向该对象。例如: ```javascript const person = { name: 'Tom', greet() { console.log(this.name); } }; person.greet(); // 输出 Tom ``` 在这个例子中,`greet` 方法是通过 `person` 对象调用的,因此 `this` 指向 `person` 对象 [^5]。 然而,需要注意的是,如果函数被赋值给一个变量并独立调用,它将失去与原对象的关联,从而导致 `this` 指向全局对象或 `undefined`(在严格模式下): ```javascript const greetFn = person.greet; greetFn(); // undefined 或 window 上的 name ``` ### 显式绑定(Explicit Binding) 可以通过 `call`、`apply` 和 `bind` 方法显式地设置 `this` 的值。这些方法允许你指定函数执行时的上下文对象。例如: ```javascript function introduce(lang) { console.log(`${lang}: I'm ${this.name}`); } const user = { name: 'Alice' }; introduce.call(user, 'EN'); introduce.apply(user, ['FR']); const boundFn = introduce.bind(user, 'CN'); boundFn(); ``` - `call` 方法允许你立即调用函数,并以逗号分隔的参数列表传递参数。 - `apply` 方法也允许你立即调用函数,但参数是以数组形式传递的。 - `bind` 方法不会立即调用函数,而是返回一个新的函数,该函数的 `this` 被永久绑定到指定的对象,并且可以预设一些参数 [^5]。 ### new 绑定(Constructor Binding) 当使用 `new` 关键字调用一个构造函数时,`this` 会被绑定到新创建的对象实例上。例如: ```javascript function Person(name) { this.name = name; } const p = new Person('Eve'); console.log(p.name); // Eve ``` 在这个例子中,`new` 关键字创建了一个新的对象,并将 `this` 绑定到这个新对象上,因此 `p.name` 的值为 `'Eve'` [^5]。 ### 总结 JavaScript 中的 `this` 关键字根据函数的调用方式决定了其指向的对象。理解 `this` 的不同绑定规则可以帮助开发者更好地控制函数执行时的上下文,从而编写出更加灵活和可复用的代码。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值