zoukankan      html  css  js  c++  java
  • 简析javascript的this

    昨天跟朝沐同学讨论到this指针,今天决定凭感觉来写一篇,或许对某些同学有帮助。
    惭愧,一直以来,写码只是凭感觉,没有系统的学习过这套那套理论,所以先申明,以下内容大多是感觉描述,没有去对照权威参考,多有错漏。

    很小白的百度知道一下“javascript this”,搜到了这个:
    http://zhidao.baidu.com/question/87695812.html?si=2
    其中,网友tkocn的回答重点就是这段:(----没考证是原创还是引用)
    定义:this是包含它的函数作为方法被调用时所属的对象。
    说明:这句话有点咬嘴,但一个多余的字也没有,定义非常准确,我们可以分3部分来理解它!
        1、包含它的函数。2、作为方法被调用时。3、所属的对象。

    那就对这段发挥一下吧。
    貌似这段话里“作为方法”这四个字可以去掉,改成这样:
    定义:this是包含它的函数,在被调用时所属的对象。
    说明:这句话有点咬嘴,但一个多余的字也没有,定义非常准确,我们可以分3部分来理解它!
        1、包含它的函数。2、在被调用时。3、所属的对象。

    先看以下代码:
    var dbl=function(n){
     this.dblValue=n*2;
     window.alert('n是几?'+n);
     window.alert('this是谁?'+this.name);
    }
    问题也就两个。
    “n是几?”,很好解答:n是函数参数,调用函数时传几就是几。
    “this是谁?”,其实也很好回答,this是主人,谁调用函数就是谁。
    上面两个回答里都有“调用函数”,
    那我们看下,通常调用函数会有哪些方式:

    代码
    dbl(1); //静态方式调用,看不到调用主人。this由js引擎决定,在浏览器里,粗略的当作window吧
    new dbl(2); //new 方式调用,会临时new出一个对象,并将this指向它。
    var jk={name:'JK'};
    jk.dbl
    =dbl;
    jk.dbl(
    3); //“.”方式调用。这一句很清楚啊,主人就是jk指针所对应的对象。因为在调用时,是通过jk.xx找到那个函数的。简而言之,就是“.”前面的对象
    dbl.call(jk,4); //因为this指向谁,是js引擎的潜规则(假设那咬嘴的定义我们明白不了)。所以js提供一些明规则,让我们指定“this”是谁。
    dbl.apply(jk,[5]); //类似于call。区别只是指定arguments的方式不一样。
    document.body.addEventListener('click',dbl);//然后点击document.body。//这也是一个典型代表:我们肉眼看不出浏览器是如何使用我们添加的监控,所以我们只那去找浏览器的相关文档。


    明白了以上,那再看以下

    var tom={name:'Tom',friend:jk};
    tom.friend.dbl(
    6); //按第3条,主人是tom.friend
    var Cls=function(name){
    this.name=name;
    };
    Cls.prototype.dbl
    =dbl;
    Cls.prototype.dbl(
    7); //按第3条,主人是Cls.prototype
    var jim=new Cls('Jim');
    jim.dbl(
    6); //按第3条,主人是jim
    var funX=function(n){
    dbl(n);
    //按第一条,主人是window
    };

    理解得差不多了吧。
    不过,还没有。
    还是回到这一句:“定义:this是包含它的函数,在被调用时所属的对象”
    最后一个单词是“对象”,
    dbl.call(null,11); //我想把this指定成null可以吗?----好像不可以哦,别人要的是对象啊,传null或undefined,就会被忽略。
    dbl.call(1,12); //传一个值,可以吗?----可以传,但是最后跟你传进来的可能会有点差别:会把它转化成对应的对象。
    执行一下以下代码看看效果:

    代码
    var fun=function(){
    alert([
    'this是:'+this,'typeof结果:'+(typeof this),'constructor是:'+this.constructor,'this===window?:'+(this===window)].join('\n'));
    }
    var arr=[null,undefined,true,1,'hello',fun,{}];
    for(var i=0;i<arr.length;i++) fun.call(arr[i]);

  • 相关阅读:
    Controller之daemonset
    Ubuntu下Zmap的安装
    VSCode无法加载PlatformIO按钮可能的原因(踩坑笔记)
    由于更换域名或者IP变更导致WordPressg无法进入后台的问题解决办法
    使用VSCode进行Arduino与ESP32开发配置指南
    Win7下阿米洛机械键盘蓝牙配置
    IIC通讯协议与SPI通讯协议小结
    如何在树莓派上搭建个人博客系统(踩坑笔记)
    STorM32 BGC三轴云台控制板电机驱动电路设计(驱动芯片DRV8313)
    #数据结构#什么是栈及栈的作用
  • 原文地址:https://www.cnblogs.com/jkisjk/p/javascript_this.html
Copyright © 2011-2022 走看看