JS中this的指向

155 阅读4分钟

it修真院小课堂

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍 在javaScript中,this是动态绑定的,它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。

            这就导致了this具备了多重含义,可以使得this可以更灵活地使用。

但是,带来了灵活性的同时也会给我们初学者带来不少困惑。

            简而言之, this 是一个特殊的标识符关键字 —— 在每个 function 中自动根据作用域(scope) 确定,

            指向的是此次调用的 “所有者,owner”。

2.知识剖析 this指向在函数定义的时候是确定不了的,只有函数被调用的时候才能够确定,实际上this的最终指向的是那个调用它的对象

this的常见的四种情形 纯粹的作为函数调用:全局函数中,this指向window

作为对象方法的调用:当函数被作为某个对象的方法调用时,this就是那个对象

作为构造函数调用:this指向新对象

apply、call调用:this指向改变后的调用这个函数的对象

1、全局环境中的this

function a(){

console.log(this);

}

a();

这里调用了a函数,而a函数的执行环境是全局环境,这里的this也就指向了全局变量window。

严格模式 ‘use strict’下的this

'use strict';

function a(){

this.user = "hello";

console.log(this);

console.log(this.user);

}

a();

console.log(user)

在严格模式下,在全局环境中执行函数调用的时候 this 并不会指向 window 而是会指向 undefined。如果不用严格模式,可能你不知不觉中就定义了几个全局变量。

2.如果函数作为一个对象的属性方法,并且被调用的时候,this 就指向这个对象。

var name = '楞头青';

var person = {

                    name: '铁头娃',

sayName: function() {

console.log(this.name);

}

};

var sayNameWin = person.sayName;

                person.sayName(); //铁头娃

                sayNameWin(); //楞头青  作为 window 的方法被调用的

3.作为构造函数被调用的时候,this 代表它即将 new 出来的对象

function Person(name) {

this.name = name;

console.log(this);

}

                var person = new Person('楞头青');

                console.log(person.name);  //楞头青

注:构造函数不使用new调用,则和普通函数一样。一般地,构造函数首字母大写

如果不加 new,表示即作为普通函数调用,指向

window

function Person(name) {

this.name = name;

console.log(this); //window

}

            Person('铁头娃');

            console.log(window.name); //铁头娃

4.作为 call/apply/bind 方法的调用

作为 call/apply/bind 方法被调用的时候指向传入的值

var person = {

                name: '楞头何'

};

function fn() {

                console.log(this); //Object {name: "楞头何"}

                console.log(this.name); //楞头何

            }

fn.apply(person);

3、常见问题 setTimeout、setInterval中的this是指向哪里?

4、解决方案 《 javascript 高级程序设计》中写到:“超时调用的代码都是在全局执行域中执行的”。setTimeout/setInterval 执行的时候,this 默认指向 window 对象,除非手动改变 this 的指向。

var name = '楞头俊';

function Person(){

                    this.name = '铁头黑';

this.sayName=function(){

console.log(this); //window

                        console.log(this.name); //楞头何

                        };

setTimeout(this.sayName, 10);

}

var person=new Person();

5、编码实战 6.扩展思考 如何改变this的指向?

可以使用call或者apply的方法

// 一个对象可以作为call和apply的第一个参数,并且this会被绑定到这个对象。

                var obj = {name: '麻辣何'};

                // 这个属性是在global对象定义的。

                var name = '开放黑';

function foo() {

                  console.log(this.name) // this的值取决于函数的调用方式

                }

                foo();          // '开放黑'

                foo.call(obj);  // '麻辣何'

                foo.apply(obj); // '麻辣何'

7.参考文献 参考一:深入浅出 JavaScript 中的 this

参考二:JavaScript 中的 this !

参考三:JavaScript中的this用法与指向

参考四:如何理解 JavaScript 中的 this 关键字?

8、更多讨论

鸣谢 感谢大家观看

今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~

技能树.IT修真院

“我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,掌控自己学习的节奏,学习的路上不再迷茫”。

这里是技能树.IT修真院,成千上万的师兄在这里找到了自己的学习路线,学习透明化,成长可见化,师兄1对1免费指导。

快来与我一起学习吧~http://www.jnshu.com/login/1/21109035