函数内部This的指向问题_内置构造函数的this指向-CSDN博客

本文链接：https://blog.csdn.net/weixin_48930189/article/details/109772243

一、函数内部this的指向
this的指向是根据调用者来确定的，调用的方式不同，this的指向不同。如下所述：
1.普通函数的调用中，函数内部的this指向全局的window

<script>
function fn(){
console.log(this)
}
fn()
</script>
//此处的thi指向的是window
//故调用该函数控制台输出的结果为window

2.构造函数的调用中，this指向的是new出来的实例化对象

<script>
function fn(name,age,sex){
this.name=username,
this.age=userage,
this.sex=sex
console.log(this)
}
var fn1 = new fn('张三',20,'男')
</script>
//输出结果为：fn {name: "张三", age: 20, sex: "男"}
//故，构造函数中的this指向的是new出来的实例化对象

3.对象方法的调用中，this指向的是该方法所属的对象

<script>
var obj = {
            name: '张三',
            age: 20,
            sex: '男',
            say: function () {
                console.log(this);
            }
        }
        obj.say()
        </script>
 //输出结果为：{name: "张三", age: 20, sex: "男", say: ƒ}
//故，对象方法调用中的this指向的是该方法所属的对象

4.绑定事件方法中，this指向的是绑定事件的对象

<body>
    <button id="but">按钮</button>
    <script>
        $('#but').on('click', function () {
            console.log(this);
        })
    </script>
</body>
//输出结果为：<button id="but">按钮</button>
//故：绑定事件方法中的this指向的是绑定事件的对象

5.定时器函数中，this指向的是window

<script>
        setInterval(function () {
            console.log(this);
        }, 3000)
    </script>
//输出的结果为：Window {window: Window, self: Window, document: document, name: "", location: Location, …}
//故，在定时器函数中this的指向是window

6.立即指向函数中，this指向的是window

(function fn(){
console.log(this)
})()
//输出的结果为：Window {window: Window, self: Window, document: document, name: "", location: Location, …}
//故，在立即执行函数中this的指向是window

二、如何改变this的指向
1.call方法
call()的特点：
1.调用函数
2.改变this的指向
3.经常用做继承
代码演示：

var obj = {
	name: 'zhangsan'
}
 function fn(a, b) {
      console.log(this);
      console.log(a+b)
};
fn()
//输出结果：Window {window: Window, self: Window, document: document, name: "", location: Location, …}
// 此时的this指向的是window
fn.call(obj,1,2)
//输出结果：{name: "zhangsan"}和3
//此时的this指向的是对象obj

2.apply方法
apply()的特点：
1.调用函数
2.改变this的指向
3.经常在数组中使用
代码演示：

var obj = {
	name: 'zhangsan'
}
 function fn(a, b) {
      console.log(this);
      console.log(a+b)
};
fn()
//输出结果：Window {window: Window, self: Window, document: document, name: "", location: Location, …}
// 此时的this指向的是window
fn.apply(obj,[1,2])
//输出结果：{name: "zhangsan"}和3
//此时的this指向的是对象obj

3.bind方法
bind()的特点：
1.不调用函数
2.改变this的指向
3.返回一个新的数组
4.经常在不需要调用函数但是需要改变this的指向时使用

 var obj = {
 name: 'zhangsan'
 };

function fn(a, b) {
	console.log(this);
	console.log(a + b);
};
var fn1 = fn.bind(obj, 1, 2);
fn1()
//输出结果：{name: "zhangsan"}和3
//此处的fn1是bind返回的新函数
//此时的this指向的是obj对象