前端知识点---this的使用方法详解(Javascript)
https://i-blog.csdnimg.cn/direct/e3536cdba9404583ad7e2e84d5b0527e.pngthis动态绑定 , this的用法
在JavaScript中，this 是一个非常重要但是呢 也让人难搞明白的关键字。
**它的值不是在编写代码时静态确定的，而是在代码运行时动态绑定的。**这非常重要
this 不是指向函数本身，而是指向 调用函数的对象。根据调用方式的不同，this 会指向不同的对象
下面讲一下它 .
01. 全局作用域下的 this
在全局作用域中（即不在任何函数中），this 通常指向全局对象：
①在浏览器中，this 指向 Window 对象。
console.log(this); // 浏览器中输出 Window
② 在Node.js环境中，this 指向 global 对象
console.log(this); // 在 Node.js 中输出：{} （指向 global 对象）
function showThis() {
console.log(this); // 在 Node.js 中输出：{} （指向 global 对象）
}
showThis();
③特殊阐明
在严格模式（‘use strict’）下，this 在全局作用域中将是 undefined，而不是 window 或 global。
'use strict';
console.log(this); // 在严格模式下输出：undefined
02. 函数中的 this
this 在函数中的举动取决于调用的方式。
2.1 普通函数和匿名函数调用
当函数以普通方式调用时，this 默认指向全局对象（在严格模式下是 undefined）。
function foo() {
console.log(this);
}
foo(); // 浏览器中，this 指向 window
// 匿名函数
setTimeout(function () {
console.log(this); //window
}, 1000);
console.log(this); //window
在严格模式下：
"use strict";
function foo() {
console.log(this);
}
foo(); // undefined
2.2 构造函数和调用
当一个函数用作构造函数（通过 new 关键字调用 创建一个新的对象实例，并将该对象与构造函数绑定）时，this 指向新创建的实例对象(关键) , 用于将属性和方法绑定到该对象。
function Person(name) {
//创建一个构造函数 , 参数为name
this.name = name;//this指向当前创建的实例对象 , 新对象有个名为name的属性 this.name = name; 将参数 name 的值赋给对象的 name 属性。
}
const person = new Person('Bob');
console.log(person.name); // 输出 'Bob'
function 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 Corolla
2.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);//this 指向调用该方法的对象，即 obj
}// 应该是一个方法 是函数类型的方法
};
obj.sayName(); // 输出 'Alice'
② this 在对象的方法中使用
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;// 将 obj1 的 greet 方法赋给 obj2
obj2.greet(); // "Charlie"
只管 greet 方法最初是界说在 obj1 上，但当我们将 greet 赋值给 obj2 后，调用 obj2.greet() 时，this 就指向了 obj2，而不是 obj1
04. 变乱处理中的 this(变乱处理函数)
在变乱处理函数中，this 通常指向触发变乱的 DOM 元素。
<button>别点我<button>
const button = document.querySelector('button');
button.addEventListener('click', function() {
console.log(this); // 输出被点击的按钮元素
});
https://i-blog.csdnimg.cn/direct/0959a025f0f04dcdb7b6f3db97552ca6.png
05. 动态绑定的方式
为什么要改变this的呢? 由于知道this的值一般不是我们想要的 , 比如箭头函数, 它没有自己的this . 以是下面讲一下 , 如何改变this的值 .
JavaScript 提供了三种显式绑定方法来改变 this 的值：(然而这仅仅是显式绑定)
想要详细了解:this四大绑定方式
5.1 call 方法
call 答应你显式指定 this 的值，并立刻调用函数。
call的语法 functionName.call(thisArg, arg1, arg2, …);
function greet() {
console.log(this.name);
}
const person = {
name: 'Alice'
};
greet.call(person); // 输出 'Alice'
5.2 apply 方法
apply 与 call 雷同，只是它吸收参数的方式不同
①根本语法
参数:
第一个参数：指定 this 的值（与 call() 一样，决定函数内部 this 的指向）。
第二个参数：是一个数组或者类数组对象，它包罗了要传递给函数的多个参数。传递的是数组的元素 , 要明白细节概念
根本语法:
functionName.apply(thisArg, );
[*]thisArg：表示我们希望 this 指向的对象。假如是null 意味着不改变this
[*]：一个数组或者类数组对象，包罗要传递给函数的多个参数
greet.apply(person); // 输出 'Alice'
②底子应用:求数组最值
Math.max函数可以求出一些数字的最大值 但是参数只能是数字 , 不能是数组
如果想要求数组最大值 , 那就用展开运算符
var arr=
console.log(Math.max(...arr))
然后转成数组就可以了
但是需要注意一个问题 展开运算符其实是ES6新添的 那Math.max函数在此之前只能是求一堆数字的最大值 , 功能有些鸡肋 , 那么当时的程序员是如何使用Math.max来最大值的呢 ?
console.log(Math.max.apply(null,arr));
第一个参数是空意味着不改变this . 把数组的元素作为了实参列表
等同于:
Math.max(arr, arr, arr)
5.3 bind 方法
①引子
<body>
<button id="btn">按钮 </button>
<div id="box"></div>
</body>
</html>
<script>
class HomePage{
n=1;
constructor (){
let box=document.querySelector("#box")
box.innerHTML=this.n
let btn=document.querySelector("#btn")
letthat=this;
//this 指向事件触发的元素，也就是按钮 btn。而不是 HomePage 类的实例。
// 如果直接使用 this.n++，会报错，因为 btn 元素并没有 n 属性。只有this有
//为了解决这个问题，我们使用了 that = this;，
//使得 that 保持了 constructor 中 this（即 HomePage 类的实例） 的引用。
btn.onclick=function(){
console.log(this);
that.n++;
box.innerHTML=that.n
}
}
}
new HomePage()
</script>
②根本用法
bind 方法与 call 和 apply 不同，它返回一个新的函数，该函数的 this 值绑定到指定的对象。
const boundGreet = greet.bind(person);
boundGreet(); // 输出 'Alice'
//通过 bind() 创建了一个新的函数 boundGreet，这个新函数的 this 永久绑定为 person 对象。
06类中的 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. 总结
https://i-blog.csdnimg.cn/direct/d40d3d5cb4d347c585b7158563acb3c1.png
1-构造函数内部-new的时候创建的对象
2-对象方法的内部-谁调用方法，方法this的就是谁
3-箭头函数-没有自己的this，跟外部环境一致
4-事件处理函数-内部的this的，指的是绑定事件的元素（谁给添加的事件，里面的this就是谁）
5-普通函数-匿名函数-全局中-this都是window--(严格模式下面，普通函数内部的this是undefined)
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]