公司 网站 苏州,有没有做旅游攻略的网站,网站优化知识资讯,seo网站建设方案文章目录 this动态绑定 , this的用法01. 全局作用域下的 this02. 函数中的 this2.1 普通函数调用2.2 构造函数调用2.3 箭头函数中的 this 03对象方法调用04. 事件处理中的 this05. 动态绑定的方式5.1 call 方法5.2 apply 方法5.3 bind 方法 06类中的 this07. 总结 this动态绑定… 文章目录 this动态绑定 , this的用法01. 全局作用域下的 this02. 函数中的 this2.1 普通函数调用2.2 构造函数调用2.3 箭头函数中的 this 03对象方法调用04. 事件处理中的 this05. 动态绑定的方式5.1 call 方法5.2 apply 方法5.3 bind 方法 06类中的 this07. 总结 this动态绑定 , this的用法
在JavaScript中this 是一个非常重要但是呢 也让人难搞明白的关键字。 **它的值不是在编写代码时静态确定的而是在代码运行时动态绑定的。**这非常重要
下面讲一下它 .
01. 全局作用域下的 this
在全局作用域中即不在任何函数中this 通常指向全局对象
在浏览器中this 指向 Window 对象。 在Node.js环境中this 指向 global 对象。
console.log(this); // 浏览器中输出 Window例子二 02. 函数中的 this
this 在函数中的行为取决于调用的方式。
2.1 普通函数调用
当函数以普通方式调用时this 默认指向全局对象在严格模式下是 undefined。
function foo() {console.log(this);
}
foo(); // 浏览器中this 指向 window在严格模式下
use strict;
function foo() {console.log(this);
}
foo(); // undefined2.2 构造函数调用
当一个函数用作构造函数通过 new 关键字调用 new关键字创建一个新的对象实例并将该对象与构造函数绑定时this 指向新创建的实例对象 , 用于将属性和方法绑定到该对象。
function Person(name) {this.name name;
}const person new Person(Bob);
console.log(person.name); // 输出 Bobfunction Person(name, age) {this.name name; // this 绑定到新创建的对象this.age age;
}const person1 new Person(Alice, 25);
console.log(person1); // Person { name: Alice, age: 25 }function Car(brand, model) {this.brand brand; // 将 brand 绑定到新对象this.model model; // 将 model 绑定到新对象this.getDetails function() {return ${this.brand} ${this.model};};
}const car1 new Car(Toyota, Corolla);
console.log(car1.getDetails()); // Toyota Corolla2.3 箭头函数中的 this
箭头函数不会创建自己的 this它会继承来自其定义位置的外层上下文的 this。
const obj {name: Alice,arrowFunc: () {console.log(this.name);}
};
obj.arrowFunc(); // undefined, 因为箭头函数中的 this 绑定的是全局对象
而普通函数会绑定到调用它的对象const obj {name: Alice,normalFunc: function() {console.log(this.name);}
};
obj.normalFunc(); // 输出 Alice
使用箭头函数时this 会继承自外层作用域03对象方法调用
当函数作为对象的方法调用时this 指向调用该方法的对象。
const obj {name: Alice,sayName: function() {console.log(this.name);}
};
obj.sayName(); // 输出 Alice当 this 在对象的方法中使用时this 指向调用该方法的对象。 const obj {name: Alice,getName() {return this.name;}
};console.log(obj.getName()); // 输出 Alice更复杂的例子 const obj1 {name: Bob,greet: function() {console.log(this.name);}
};const obj2 {name: Charlie
};obj2.greet obj1.greet;obj2.greet(); // Charlie方法调用时this 指向调用该方法的对象。
04. 事件处理中的 this
在事件处理函数中this 通常指向触发事件的 DOM 元素。
const button document.querySelector(button);
button.addEventListener(click, function() {console.log(this); // 输出被点击的按钮元素
});05. 动态绑定的方式
JavaScript 提供了三种显式绑定方法来改变 this 的值(然而这仅仅是显式绑定)
详细了解:
this四大绑定方式
5.1 call 方法
call 允许你显式指定 this 的值并立即调用函数。
function greet() {console.log(this.name);
}const person { name: Alice };
greet.call(person); // 输出 Alice5.2 apply 方法
apply 与 call 类似只是它接收参数的方式不同apply 接收一个参数数组。
greet.apply(person); // 输出 Alice5.3 bind 方法
bind 方法与 call 和 apply 不同它返回一个新的函数该函数的 this 值绑定到指定的对象。
const boundGreet greet.bind(person);
boundGreet(); // 输出 Alice06类中的 this
在类的实例方法中this 指向实例对象
class Animal {constructor(name) {this.name name;}speak() {console.log(${this.name} makes a sound.);}
}const dog new Animal(Dog);
dog.speak(); // Dog makes a sound.07. 总结
