JavaScript中的this关键字的用法和注意点

xiaoxiao2021-03-26 26

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构造函数内对象的属性和方法深拷贝一份(包括引用类型：指针和堆空间的数据)

上述代码先创建一个对象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 ></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关键字永远指向实际调用者