JS-面向对象-This的指向---简单的函数调用 / 作为对象的方法调用时 / 作为构造函数调用时

2023-09-09 阅读 15 评论 0

摘要：简单的函数调用 <!DOCTYPE html> <html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv=

简单的函数调用


<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><script>// 1. 普通的函数调用时function max () {this.x = 1;// this 指的是 global 对象，由于 global 对象是作为 window 对象的一部分实现的，因此 this 认为是 window 对象console.log(this)}max();</script>
</body></html>

作为对象的方法调用时


<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><script>// 2. 作为对象的方法调用时var obj = {fullName: '张康',sayName: function() {// this 指的是 obj 对象console.log(this)return this.fullName;}};// 函数中的 this 指向的是函数的直接所有者。换句话来说，函数直接属于谁，函数中的 this 就指向谁。window.obj.sayName();</script>
</body></html>

作为构造函数调用时


<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><script>// 3. 作为构造函数调用时function Dog(dogName, dogAge) {// this 指的是新创建的实例，接下来会被自动返回到函数外部console.log(this)this.name = dogName;this.age = dogAge;}// 调用构造函数var dog1 = new Dog('哈士奇', 3);var dog2 = new Dog('泰迪', 2);console.log(dog1, dog2)</script>
</body></html>