js this

指当前调用的对象:4种绑定规则:默认绑定、隐式绑定、显式绑定、new绑定,优先级从低到高

var person = {
    name:'zhangsan',
    age:20,
    getName:function(){
        console.log(this.name);
    },
    getAge:function(){
        function aa() { //局部函数
            console.log(this+'  '+this.age);//局部函数this指向window 
        }
        aa();
        console.log(this+' ' + this.age);
    }
};
person.getName();
person.getAge();

 

 

在 JavaScript 中,`this` 关键字的行为是动态的,其值取决于函数的调用方式,而非定义时的上下文。这种动态绑定机制使得 `this` 在不同调用场景中表现出不同的行为,同时也增加了理解和使用它的复杂性。 ### 函数调用模式中的 `this` 当一个函数被作为独立函数调用时,`this` 默认绑定到全局对象(在浏览器中为 `window`,在 Node.js 中为 `global`)。例如: ```javascript function example() { console.log(this); } example(); // 输出全局对象(如 window) ``` 此行为是 JavaScript 的默认机制,但如果在严格模式(`"use strict"`)下,`this` 将绑定为 `undefined`,而不是全局对象[^1]。 ### 方法调用模式中的 `this` 当函数作为对象的方法调用时,`this` 会绑定到该对象。例如: ```javascript const obj = { name: "Alice", greet: function() { console.log(`Hello, ${this.name}`); } }; obj.greet(); // 输出 "Hello, Alice" ``` 在此场景中,`this` 指向调用该方法的对象 `obj`。如果方法被赋值给另一个变量,再进行调用,则 `this` 的绑定会丢失,并指向全局对象或 `undefined`(在严格模式下)[^1]。 ### 构造函数调用模式中的 `this` 当使用 `new` 关键字调用函数时,该函数会作为构造函数,创建一个新的对象,并将 `this` 绑定到该新对象。例如: ```javascript function Person(name) { this.name = name; } const person = new Person("Bob"); console.log(person.name); // 输出 "Bob" ``` 在此情况下,`this` 指向新创建的实例对象,而不是全局对象或调用对象[^1]。 ### 显式绑定 `this`:`call`、`apply` 与 `bind` JavaScript 提供了 `call`、`apply` 和 `bind` 方法,允许显式指定 `this` 的值: - `call` 和 `apply` 会立即执行函数,并将 `this` 设置为指定的对象。 - `bind` 返回一个新函数,其 `this` 被永久绑定到指定对象。 例如: ```javascript const obj1 = { value: 42 }; const obj2 = { value: 99 }; function showValue() { console.log(this.value); } showValue.call(obj1); // 输出 42 showValue.apply(obj2); // 输出 99 const boundFunc = showValue.bind(obj1); boundFunc(); // 输出 42 ``` 这些方法可以覆盖默认的 `this` 绑定规则,并提供更精确的控制[^1]。 ### 箭头函数中的 `this` 箭头函数不会创建自己的 `this` 上下文,而是继承外层函数或全局作用域中的 `this` 值。例如: ```javascript const obj = { value: 10, showValue: () => { console.log(this.value); } }; obj.showValue(); // 输出 undefined(在浏览器中) ``` 在此示例中,`this` 指向全局对象(如 `window`),而不是 `obj`。这是因为箭头函数没有自己的 `this`,它继承自外层作用域[^1]。 ### `this` 在事件处理函数中的行为 在 DOM 事件处理函数中,`this` 通常指向触发事件的元素。例如: ```javascript document.getElementById("myButton").addEventListener("click", function() { console.log(this.id); // 输出 "myButton" }); ``` 在此情况下,`this` 指向绑定事件的 DOM 元素。如果使用箭头函数,则 `this` 会继承外层作用域的值,而不是指向触发事件的元素[^1]。 ### `this` 在回调函数中的行为 在异步编程或回调函数中,`this` 的值可能会发生变化。例如: ```javascript const obj = { value: 10, delayedShow: function() { setTimeout(function() { console.log(this.value); // 输出 undefined }, 100); } }; obj.delayedShow(); ``` 在此示例中,`setTimeout` 中的函数作为独立函数调用,因此 `this` 指向全局对象(如 `window`)。为了解决此问题,可以使用 `bind` 或箭头函数来保留 `this` 的值: ```javascript setTimeout(() => { console.log(this.value); // 输出 10 }, 100); ``` 通过使用箭头函数,`this` 会继承外层函数的上下文,从而正确指向 `obj`[^1]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值