js 理解this指向(个人学习笔记)
this就是函数运行时自动生成的一个内部对象
首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然网上大部分的文章都是这样说的,虽然在很多情况下那样去理解不会出什么问题,但是实际上那样理解是不准确的,所以在你理解this的时候会有种琢磨不透的感觉),那么接下来我会深入的探讨这个问题。
为什么要学习this?如果你学过面向对象编程,那你肯定知道干什么用的,如果你没有学过,那么暂时可以不用看这篇文章,当然如果你有兴趣也可以看看,毕竟这是js中必须要掌握的东西。
1. (alert也是window的一个属性,也是window点出来的。)
function a(){ var user = "追梦子"; console.log(this.user); //undefined console.log(this); //Window } a();//像这中的都是window对象调用的,,,等同于window.a(); 函数的里面指向的就是window,,,,window.user没有定义,所以是undifined
2.
var o = { user:"追梦子", fn:function(){ console.log(this.user); //追梦子 } } o.fn(); //fn()这个函数是o这个对象调用的,,,所以里面的this指向的是o o.user == "追梦子”
3.
var o = { user:"追梦子", fn:function(){ console.log(this.user); //追梦子 } } window.o.fn(); // this指向o 因为函数前面的第一个是o
var o = { a:10, b:{ a:12, fn:function(){ console.log(this.a); //12 } } } o.b.fn();//等价于 window.o.b.fn() 函数真正运行是fn() 前面第一个调用的是b,,,所以this指向的是b对象
var o = { a:10, b:{ // a:12, fn:function(){ console.log(this.a); //undefined } } } o.b.fn();//b
通过上面的例子,我们可以看到,,要确定this的指向问题,必须要看调用的时候的实际情况,我们其实可以这样,每个调用的时候,在前面都可以加上window调用,这样再去看;
this的指向就是调用的时候,this指向的前面的(第一个)对象
然后我们看下面的这个例子:
var o = { a:10, b:{ a:12, fn:function(){ console.log(this.a); //undefined console.log(this); //window } } } var j = o.b.fn;////不要看这,,,因为函数在这边是没有调用的,没有调用就是什么也没有用 j();//等价于window.j(); 这样的话,我们知道这个函数执行的时候,里面的this指向的window
this永远指向的是最后调用它的对象
构造函数版this:(new可以改变this的指向)
function Fn(){ this.user = "追梦子"; } var a = new Fn();//this指向a console.log(a.user); //追梦子
new运行原理是:
new Animal('cat') = {//类似这样 var obj = {};//先定义一个空对象 obj.__proto__ = Animal.prototype;//把 obj 的__proto__ 指向构造函数 Animal 的原型对象 prototype,此时便建立了 obj 对象的原型链:obj->Animal.prototype->Object.prototype->null
var result = Animal.call(obj,"cat");//改变this指向,从Animal改变到obj上
return typeof result === 'object'? result : obj; //返回 }
当this碰到return时
1.
function fn() { this.user = '追梦子'; return {}; } var a = new fn; console.log(a.user); //undefined
2.
function fn() { this.user = '追梦子'; return function(){}; } var a = new fn; console.log(a.user); //undefined
3.
function fn() { this.user = '追梦子'; return 1; } var a = new fn; console.log(a.user); //追梦子
4.
function fn() { this.user = '追梦子'; return undefined; } var a = new fn; console.log(a.user); //追梦子
通过上面的例子,我们可以看到,当返回值位Object的时候,this指向是改变的,当是其他类型的时候,this指向是不会改变的,还会指向那个实例
还有一点就是虽然null也是对象,但是在这里this还是指向那个函数的实例,因为null比较特殊。(null也是Object类型)
知识点补充:
在严格版中的默认的this不再是window,而是undefined。