JavaScript中的this关键字的用法和注意点
一、this关键字的用法
this一般用于指向对象(绑定对象);
01、在普通函数调用中，其内部的this指向全局对象(window);
function funcName(){
this.name = 'Jack';
console.log(this);// Window
}
funcName();
console.log(window.name);// Jack
console.log(this.name);// Jack
上述代码先声明一个函数名为funcName的函数，给函数内部的对象添加属性name,并打印this的指向(window)，分别打印this的属性值和全局对象(window)的属性值，二者相等说明this指向全局对象(window);
02、在构造函数调用中，其内部的this指向新创建的对象
function Person() {
this.name = '郭嘉';
console.log(this);// Person {name: "郭嘉"}
}
var p1 = new Person();
console.log(p1.name); // 郭嘉
console.log(window.name);// 空
上述代码先声明一个函数名为Person的构造函数，给构造函数内部的对象添加属性name,并打印this的指向(新创建的对象：Person {name: "郭嘉"})，用Person构造函数实例化一个对象p1,分别打印p1的属性值和全局对象(window)的属性值，二者不相等说明this指向的是新创建的对象(Person {name: "郭嘉"})而不是全局对象(window);
补充：使用new关键字创建构造函数的实例对象的系统内部流程
/*用new关键字创建构造函数的实例的系统内部流程*/
//001 使用new 关键字在内部默认创建一个对象
//002 在构造函数内部,把默认创建的对象赋值给this
//003 通过this来设置对象的属性和方法
//004 默认把新创建的对象返回给我们
function Person() {
//var this = new Object();//使用new 关键字在内部默认创建一个对象，并在构造函数内部,把默认创建的对象赋值给this
this.name = '郭嘉';//通过this来设置对象的属性和方法
console.log(this);// Person {name: "郭嘉"}
//return this;// 默认把新创建的对象返回给我们
}
03、在对象的方法调用中，其内部的this指向调用的对象本身
//以对象的方法来进行调用
var obj = {
name:"张三", // 对象的属性
getName:function () { // 对象的方法
console.log(this);// Object {name: "张三"}
}
};
obj.getName();// 对象的方法调用
console.log(obj.name); // 张三
console.log(window.name);// 空
上述代码先声明一个对象名为obj的对象，给对象添加属性name,和方法getName,并在方法内部打印this的指向(对象本身：Object {name: "张三"}),调用对象的方法,打印this的指向是对象本身(Object {name: "张三"})而不是全局对象(window);
04、在事件处理中，其内部的this指向产生这个事件源的对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id='btn'>click</button>
<script>
var btn = document.getElementById('btn');// 获取id为btn的标签
btn.onclick = function () {// 按钮点击事件
console.log(this);
// <button id='btn'>click</button>
};
</script>
</body>
</html>
上述代码先用html创建一个按钮，再给这个按钮添加一个点击事件，并打印this的指向(<button id =”btn”>click</button>),得出结论是this指向产生事件源的对象(<button id =”btn”>click</button>);
05、在定时器中其内部的this指针指向window对象
function Person() {
// 备份指针
console.log(this); // Person {}
var self = this;
setInterval(function () {
console.log(self);// Person {}
console.log(this);// Window
}, 20);
}
new Person();
上述代码先创建一个person函数，再用self来备份一下this指针，再创建定时器，定时器内部的this永远指针指向window对象，有时候我们我们要用到指定的对象不是window对象，我们可以通过备份指针来实现；
06、通过call或者apply方式调用中(函数上下文),this指向的是当前的上下文，主要是改变this的指向
call方法: 传入的参数数量不固定
第一个参数是要绑定给this的值(即函数体内this对象的指向)
第二个参数开始往后,每个参数都依次的传入作为函数的参数
apply: 接收两个参数
第一个参数是要绑定给this的值(即函数体内this对象的指向)
第二个就是一个参数数组
function Person() {
this.name = 'Jack';
}
function Boy() {
Person.call(this);
console.log(this);// Boy {name: "Jack"}
}
var b1 = new Boy();
上述代码创建两个构造函数Person和Boy，使用call方法让Person构造函数中的this指向Boy构造函数，相当于把Person构造函数内对象的属性和方法深拷贝一份(包括引用类型：指针和堆空间的数据)
var obj = {
name:"张三",
getName:function (param1,param2) {
console.log(this.name,param1,param2);
}
}
obj.getName("123","456"); //张三 123 456
var obj2 = {name:"李四"};
obj.getName.call(obj2); //打印李四 undefined undefined
obj.getName.call(obj2,"测试字符串01","测试的字符串02"); // 李四 测试字符串01 测试的字符串02
obj.getName.apply(obj2,["123","456"]); // 李四 123 456
上述代码先创建一个对象obj并添加属性name和方法getName,调用自身的方法得出的结果(张三 123 456),再创建一个对象obj2,添加属性name,obj.getName.call(obj2);这句话的意思是obj的方法getName借给obj2使用，其obj方法内部的this指向obj2;得出的结果是李四 undefined(没有传参) undefined(没有传参)；call方法主要是改变this的指向；apply的方法作用和call一样，只是传的参数不一样，call可以只传一个参数（要绑定给this的值），也可以传多个；而apply接收两个参数（要绑定给this的值，[]）,第二个参数是数组，数组的长度不定。
二、this关键字用法的注意点
This的丢失问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box');// 获取标签
var getId = document.getElementById;//
var box = getId('box');// Uncaught TypeError: Illegal invocation (未捕获的类型错误)
console.log(box);
</script>
</body>
</html>
上述代码先在html中创建一个id为box的div，然后再js中获取标签，有时候我们嫌获取标签的方法太长了，想要缩减一下(var getId = document.getElementById)，再调用，然而上述代码调用时则报错了！原因是方法内部的this指针丢失了，原先document.getElementById内部实现中用到this指针，其指向document对象，而getId调用时是按普通函数调用的，其内部的this指针指向window对象，所以执行到这一步的时候报错！
现在用apply方法来修正this的指向
//借用apply来修正this
document.getElementById = (function (func) {
return function () {
return func.apply(document,arguments);
}
})(document.getElementById);
var getId = document.getElementById;
/*上句代码等同于下面这句代码
var getId = function () {
return document.getElementById.apply(document,arguments);
}*/
var box = getId('box'); //不会报错
console.log(box);// <div id="box"></div>
上述代码先在document.getElementById方法内部添加一个让this指针一直指向document对象的操作;document.getElementById =(function(func){})(document.getElementById);这是一个立即执行函数，把document.getElementById当作实参传进去，而函数内部则返回另一个函数，而这个函数内部则执行改变this指向的操作document.getElementById.apply(document,arguments);意思是让this永远指向document对象；arguments指的是传进去的实参Id(box);
三、结论
This关键字永远指向实际调用者
JavaScript中的this关键字的用法和注意点
一、this关键字的用法
this一般用于指向对象(绑定对象);
01、在普通函数调用中，其内部的this指向全局对象(window);
function funcName(){
this.name = 'Jack';
console.log(this);// Window
}
funcName();
console.log(window.name);// Jack
console.log(this.name);// Jack
上述代码先声明一个函数名为funcName的函数，给函数内部的对象添加属性name,并打印this的指向(window)，分别打印this的属性值和全局对象(window)的属性值，二者相等说明this指向全局对象(window);
02、在构造函数调用中，其内部的this指向新创建的对象
function Person() {
this.name = '郭嘉';
console.log(this);// Person {name: "郭嘉"}
}
var p1 = new Person();
console.log(p1.name); // 郭嘉
console.log(window.name);// 空
上述代码先声明一个函数名为Person的构造函数，给构造函数内部的对象添加属性name,并打印this的指向(新创建的对象：Person {name: "郭嘉"})，用Person构造函数实例化一个对象p1,分别打印p1的属性值和全局对象(window)的属性值，二者不相等说明this指向的是新创建的对象(Person {name: "郭嘉"})而不是全局对象(window);
补充：使用new关键字创建构造函数的实例对象的系统内部流程
/*用new关键字创建构造函数的实例的系统内部流程*/
//001 使用new 关键字在内部默认创建一个对象
//002 在构造函数内部,把默认创建的对象赋值给this
//003 通过this来设置对象的属性和方法
//004 默认把新创建的对象返回给我们
function Person() {
//var this = new Object();//使用new 关键字在内部默认创建一个对象，并在构造函数内部,把默认创建的对象赋值给this
this.name = '郭嘉';//通过this来设置对象的属性和方法
console.log(this);// Person {name: "郭嘉"}
//return this;// 默认把新创建的对象返回给我们
}
03、在对象的方法调用中，其内部的this指向调用的对象本身
//以对象的方法来进行调用
var obj = {
name:"张三", // 对象的属性
getName:function () { // 对象的方法
console.log(this);// Object {name: "张三"}
}
};
obj.getName();// 对象的方法调用
console.log(obj.name); // 张三
console.log(window.name);// 空
上述代码先声明一个对象名为obj的对象，给对象添加属性name,和方法getName,并在方法内部打印this的指向(对象本身：Object {name: "张三"}),调用对象的方法,打印this的指向是对象本身(Object {name: "张三"})而不是全局对象(window);
04、在事件处理中，其内部的this指向产生这个事件源的对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id='btn'>click</button>
<script>
var btn = document.getElementById('btn');// 获取id为btn的标签
btn.onclick = function () {// 按钮点击事件
console.log(this);
// <button id='btn'>click</button>
};
</script>
</body>
</html>
上述代码先用html创建一个按钮，再给这个按钮添加一个点击事件，并打印this的指向(<button id =”btn”>click</button>),得出结论是this指向产生事件源的对象(<button id =”btn”>click</button>);
05、在定时器中其内部的this指针指向window对象
function Person() {
// 备份指针
console.log(this); // Person {}
var self = this;
setInterval(function () {
console.log(self);// Person {}
console.log(this);// Window
}, 20);
}
new Person();
上述代码先创建一个person函数，再用self来备份一下this指针，再创建定时器，定时器内部的this永远指针指向window对象，有时候我们我们要用到指定的对象不是window对象，我们可以通过备份指针来实现；
06、通过call或者apply方式调用中(函数上下文),this指向的是当前的上下文，主要是改变this的指向
call方法: 传入的参数数量不固定
第一个参数是要绑定给this的值(即函数体内this对象的指向)
第二个参数开始往后,每个参数都依次的传入作为函数的参数
apply: 接收两个参数
第一个参数是要绑定给this的值(即函数体内this对象的指向)
第二个就是一个参数数组
function Person() {
this.name = 'Jack';
}
function Boy() {
Person.call(this);
console.log(this);// Boy {name: "Jack"}
}
var b1 = new Boy();
上述代码创建两个构造函数Person和Boy，使用call方法让Person构造函数中的this指向Boy构造函数，相当于把Person构造函数内对象的属性和方法深拷贝一份(包括引用类型：指针和堆空间的数据)
var obj = {
name:"张三",
getName:function (param1,param2) {
console.log(this.name,param1,param2);
}
}
obj.getName("123","456"); //张三 123 456
var obj2 = {name:"李四"};
obj.getName.call(obj2); //打印李四 undefined undefined
obj.getName.call(obj2,"测试字符串01","测试的字符串02"); // 李四 测试字符串01 测试的字符串02
obj.getName.apply(obj2,["123","456"]); // 李四 123 456
上述代码先创建一个对象obj并添加属性name和方法getName,调用自身的方法得出的结果(张三 123 456),再创建一个对象obj2,添加属性name,obj.getName.call(obj2);这句话的意思是obj的方法getName借给obj2使用，其obj方法内部的this指向obj2;得出的结果是李四 undefined(没有传参) undefined(没有传参)；call方法主要是改变this的指向；apply的方法作用和call一样，只是传的参数不一样，call可以只传一个参数（要绑定给this的值），也可以传多个；而apply接收两个参数（要绑定给this的值，[]）,第二个参数是数组，数组的长度不定。
二、this关键字用法的注意点
This的丢失问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box');// 获取标签
var getId = document.getElementById;//
var box = getId('box');// Uncaught TypeError: Illegal invocation (未捕获的类型错误)
console.log(box);
</script>
</body>
</html>
上述代码先在html中创建一个id为box的div，然后再js中获取标签，有时候我们嫌获取标签的方法太长了，想要缩减一下(var getId = document.getElementById)，再调用，然而上述代码调用时则报错了！原因是方法内部的this指针丢失了，原先document.getElementById内部实现中用到this指针，其指向document对象，而getId调用时是按普通函数调用的，其内部的this指针指向window对象，所以执行到这一步的时候报错！
现在用apply方法来修正this的指向
//借用apply来修正this
document.getElementById = (function (func) {
return function () {
return func.apply(document,arguments);
}
})(document.getElementById);
var getId = document.getElementById;
/*上句代码等同于下面这句代码
var getId = function () {
return document.getElementById.apply(document,arguments);
}*/
var box = getId('box'); //不会报错
console.log(box);// <div id="box"></div>
上述代码先在document.getElementById方法内部添加一个让this指针一直指向document对象的操作;document.getElementById =(function(func){})(document.getElementById);这是一个立即执行函数，把document.getElementById当作实参传进去，而函数内部则返回另一个函数，而这个函数内部则执行改变this指向的操作document.getElementById.apply(document,arguments);意思是让this永远指向document对象；arguments指的是传进去的实参Id(box);
三、结论
This关键字永远指向实际调用者
https://github.com/350469960/OS/blob/master/javascript/this.md