目录
1.普通函数调用，此时 this 指向 window
function fn() {
console.log(this); // window
}
fn(); // window.fn(),此处默认省略window2.构造函数调用， 此时 this 指向 实例对象
function Person(age, name) { this.age = age; this.name = name console.log(this) // 此处 this 分别指向 Person 的实例对象 p1 p2 } var p1 = new Person(15, 'lang') var p2 = new Person(20, 'ge') 构造函数中的this指向创建出来的实例 //不使用new指向window function Person(name) { console.log(this) // window this.name = name; } Person('inwe') //使用new function Person(name) { this.name = name console.log(this) //people self = this } var people = new Person('iwen') console.log(self === people) //true //这里new改变了this指向，将this由window指向Person的实例对象people
3.对象方法调用， 此时 this 指向 该方法所属的对象
var obj = {
fn () {
console.log(this); // obj
}
}
obj.fn();//对象调用里面的方法4.dom事件调用this指向绑定的dom
<body>
<button id="btn">默认按钮</button>
</body>
<script>
var oBtn = document.getElementById("btn");
oBtn.onclick = function() {
console.log(this); // dom事件调用this指向绑定的dom //<button id="btn">默认按钮</button>
}
</script>
5.定时器函数， 此时 this 指向 window
setInterval(function () {
console.log(this); // window
}, 1000);6 箭头函数
当使用箭头函数时，`this`关键字将指向最近的外层非箭头函数的上下文。如果没有找到外层的非箭头函数，则`this`将指向全局对象。
例如，以下代码中，当调用`person.sayHello()`方法时，箭头函数`() => console.log(this.name)`中的`this`关键字将指向`person`对象，因为它是最近的外层非箭头函数的上下文：
const person = {
name: 'Alice',
sayHello: function() {
const innerFunc = () => console.log(this.name);
innerFunc();
}
};
person.sayHello(); // 输出 "Alice"另一方面，在以下代码中，当调用`sayHello()`全局函数时，箭头函数`() => console.log(this)`中的`this`关键字将指向全局对象，因为没有找到外层的非箭头函数：
const sayHello = () => console.log(this);
sayHello(); // 输出全局对象需要注意的是，当使用普通函数时，`this`关键字将根据函数的调用方式而有所不同。例如，当使用`call()`或`apply()`方法调用函数时，可以显式地设置`this`关键字的值。
总结：
在JavaScript中，`this`关键字的值取决于函数的调用方式。当使用普通函数时，`this`关键字的值取决于函数的调用方式。如果函数是作为对象的方法调用，则`this`关键字将指向该对象；如果函数是作为普通函数调用，则`this`关键字将指向全局对象（在浏览器中是`window`对象，在Node.js中是`global`对象）。
例如，在以下代码中，调用`person.sayHello()`方法时，`this`关键字将指向`person`对象：
const person = {
name: 'Alice',
sayHello: function() {
console.log(this.name);
}
};
person.sayHello(); // 输出 "Alice"而在以下代码中，`sayHello()`函数是作为普通函数调用，因此`this`关键字将指向全局对象：
function sayHello() {
console.log(this);
}
sayHello(); // 输出全局对象需要注意的是，可以使用`call()`或`apply()`方法显式地设置函数的`this`关键字的值。例如，在以下代码中，通过调用`sayHello.call(person)`方法，将`this`关键字的值设置为`person`对象，使得`console.log(this.name)`输出`person`对象的`name`属性：
const person = {
name: 'Alice'
};
function sayHello() {
console.log(this.name);
}
sayHello.call(person); // 输出 "Alice"另外，当使用`new`关键字创建函数的实例时，`this`关键字将指向该实例。
总结完毕！
扫一扫
989
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
