资讯专栏INFORMATION COLUMN

javascript 下的 this

Lycheeee / 2793人阅读

摘要:对还有开玩笑不多说,这章来讨论一下下的。此前先仔细体会这句话永远指向的是最后调用它的对象。其中调用的对象是谁,所以返回的就是。当遇到和例子当执行的就指向,所以拿到的也是下的和和能改变的指针

javascript 下的 this,让你猜不透,摸不着,但语法终究有语法的规范,没有莫名的奇妙,只有欠合理的解释。对还有 bug ... 开玩笑 ^-^///

不多说,这章来讨论一下 javascript 下的 this 。
此前先仔细体会这句话:this永远指向的是最后调用它的对象。

由于其运行期绑定的特性,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁。

window 下的 this:

看几个例子来解释我上面强调的那句话:

function a(){
    var num= 233;
    console.log(this.user); //undefined
    console.log(this); //Window
}
a();

运行结果是 this指向的是 window ,所以 this.user 是 undefined,
a() 是 一个函数也可以说是方法 ,那方法肯定是由对象来调用的。
所以当执行 a(); 时 就有一个隐式对象调用了a() ,这个隐式对象就是 window

再来个例子:

var obj = {
    num: 233,
    getThis:function () {
        return this;
    }
}

console.log(obj.getThis() ); //{ num: 233, getThis: [Function] }

var fun = obj.getThis;
console.log(fun() ); // window

上面是一个对象里面有方法属性;
可以看出 obj.getThis() ;调用方法会打印出当前对象(打印日志里面有属性和方法);
可能大家回想,这不是常理之中吗,但下面这代码我只是做了一些赋值结果怎么就不一样了呢?

var fun = obj.getThis;
console.log(fun() ); // window

因为 执行fun() 是一个方法,需要对象才能调用方法,而上面执行 fun()的对象是谁,就是隐式的 window (这句话好像上面第一段代码说过 -_-///),

好了,如果还感觉有点绕就来说明一下:

this永远指向的是最后调用它的对象。

obj.getThis() 其中 调用 getThis() 的 对象是谁? obj,所以 返回的this就是 obj。
console.log( fun() ); 其中 调用 fun() 的对象是谁,没谁调用啊? 没谁那就是隐式的 window 啦 ,所以返回的是 window ,看哪个最后调用它,那么this就指向那个。

上面清楚了来分析下面这段代码应该就容易了:

num_1 = 233;
var obj = {
    num_2: 1111,
    getNum:function () {
        this.num_1 = 666;
        this.fun = function () {
            return this.num_1;
        }
    }
}
obj.getNum();
console.log(obj.fun() ); // 666
var fun = obj.fun;
console.log( fun() ); // 233

先执行了 obj.getNum();getNum() 里面的 属性和方法进行赋值;
接着 执行 obj.fun(), 因为 里面的 this 指向调用它的 obj,所以 得到num_1 = 666;
再接着执行 fun() ,因为 调用这方法的是隐式 window ,所以 this.num_1; 就会找到 在window声明的遍历 num_1 = 233;

当遇到包含对象的问题:

var obj = {
    a:233,
    obj_2:{
        a:666,
        fn:function(){
            console.log(this.a); // 666 
        }
    } 
}
obj.obj_2.fn();

也很好解释 ,找到调用 fn() 函数的对象 是 obj_2, 所以 this 指向 obj_2。

当 this 碰到 return 时:
例子1:

function fun()
{
    this.num= 233;
    return {};
}
var a = new fun();
console.log(a.num); //undefined

例子2:

function fun()
{
    this.num= 233;
    return 11;
}
var a = new fun();
console.log(a.num); //233

总结一句话 : 如果返回值是一个对象,那么this指向的就是那个返回的对象,如果返回值不是一个对象那么this还是指向函数的实例。

当 this 遇到 apply() 和 call()
例子1 :

function AddNum(a,b){
    this.a = a;
    this.b = b;
    this.fun = function ( ) {
        return this.a + this.b;
    }
}

var obj = new  AddNum(1,2);
console.log(  obj.fun() );  // 3
var obj_2 = {a:2,b:4};
console.log(  obj.fun.call(obj_2) ); // 6

当执行 obj.fun.call(obj_2); fun() 的this 就指向 obj_2,所以this.a + this.b;拿到的也是 obj_2 下的 a 和 b ;

apply() 和 call() 能 改变 this 的 指针

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/80283.html

相关文章

  • 关于JavaScriptthis的理解

    摘要:想想也是难以置信,这应该全归功于对框架的依赖,促使助长了自己对学习的懈怠。真正的成了离职就失业的尴尬境地。我们接下来来了解下中的的使用和作用。以前对中的理解很简单粗暴谁调用就指向谁。如果例题中有不对的地方希望予以指教留言评论 前言 使用JavaScript有很长一段时间了,但是以前过多都是使用,从不去及理解其中原理,单单只是去生拼硬凑。这样的开发居然做了2年。匪夷所思居然项目中Java...

    lindroid 评论0 收藏0
  • JavaScript深入之变量对象

    摘要:深入系列第四篇,具体讲解执行上下文中的变量对象与活动对象。下一篇文章深入之作用域链本文相关链接深入之执行上下文栈深入系列深入系列目录地址。 JavaScript深入系列第四篇,具体讲解执行上下文中的变量对象与活动对象。全局上下文下的变量对象是什么?函数上下文下的活动对象是如何分析和执行的?还有两个思考题帮你加深印象,快来看看吧! 前言 在上篇《JavaScript深入之执行上下文栈》中...

    Zachary 评论0 收藏0
  • JavaScript 实现 iOS 下的计算器

    摘要:最后一次更新于效果演示图计算器该项目可在浏览器页面上实现计算器。需要实现的功能是每当用户点击按钮,文本框要实时显示被更新的表达式。如果当前表达式无法被计算,被异常处理捕获并在文本框显示。 最后一次更新于2019/07/08 效果演示图 showImg(https://segmentfault.com/img/bVbuLX9?w=691&h=1073); iOS 计算器 该项目可在浏览器...

    shengguo 评论0 收藏0
  • JavaScript 实现 iOS 下的计算器

    摘要:最后一次更新于效果演示图计算器该项目可在浏览器页面上实现计算器。需要实现的功能是每当用户点击按钮,文本框要实时显示被更新的表达式。如果当前表达式无法被计算,被异常处理捕获并在文本框显示。 最后一次更新于2019/07/08 效果演示图 showImg(https://segmentfault.com/img/bVbuLX9?w=691&h=1073); iOS 计算器 该项目可在浏览器...

    elisa.yang 评论0 收藏0
  • JavaScript 实现 iOS 下的计算器

    摘要:最后一次更新于效果演示图计算器该项目可在浏览器页面上实现计算器。需要实现的功能是每当用户点击按钮,文本框要实时显示被更新的表达式。如果当前表达式无法被计算,被异常处理捕获并在文本框显示。 最后一次更新于2019/07/08 效果演示图 showImg(https://segmentfault.com/img/bVbuLX9?w=691&h=1073); iOS 计算器 该项目可在浏览器...

    Forest10 评论0 收藏0

发表评论

0条评论

Lycheeee

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<