zoukankan      html  css  js  c++  java
  • js中的this指针的用法

        首先看下面代码:

        

    复制代码
    function funcA() {
        this.name = "hello";
        console.log(this.name);
        this.show = function() {
            console.log(this.name);
        }
    }
    funcA();// 1、hello
    var a = new funcA();//2、hello
    a.show();//3、hello
    var objA = {
        name: "objA"
    }
    a.show.call(objA);//4、objA
    
    var objB = {
        name: "objB"
    }
    objB.show = a.show
    objB.show();//5、objB
    (objB.show = a.show)();//6、hello
    复制代码

    这几段代码就把this常见的情况给表现出来的差不多了, this在js中主要有四种用法:

    1、作为普通函数使用

    2、作为对象方法来使用

    3、call和apply

    4、作为构造函数来使用

    下面分别说明

    1、作为普通函数来使用:

    复制代码
     function funcA() {
        this.name = "hello";
        console.log(this.name);
        this.show = function() {
            console.log(this.name);
        }
    }
    funcA();// 1、hello
    复制代码

    这个代码很简单,但也隐藏了一个坑,就是这个时候的this 代表的是window的指针,所以当这段代码运行完之后,你再输出 console.log(window.name)时候,你会发现输出为”hello”,在使用中尽量避免。

    2、作为对象方法来使用

    var obj={name:"hello",show:function(){

    console.log(this.name);

    }};

    obj.show();

    这个很简单,this指向自己,所以this.name就用hello;

    如果代码修改下:

    复制代码
    var obj={name:"hello",show:function(){
        console.log(this.name);
    }};
    obj.show();
    
    var objA={name:"world"}
    objA.show=obj.show;
    objA.show()
    复制代码

    这个结果又是什么呢?答案是”world”,因为在js中对象都是引用类型,当objA.show=obj.show这句代码把objA.show也指向的show方法,所以在调用的时候会把this,指向objA而不是obj.

    3callapply

    这个在上面的继承中的原型冒充中也提过一些,这里也详细说明this在call和apply中微秒的用法:

    复制代码
    function funcA() {
        this.name = "hello";
        console.log(this.name);
        this.show = function() {
            console.log(this.name);
        }
    }
     
    var a = new funcA();
    a.show();
    var objA = {
        name: "objA"
    }
    a.show.call(objA);
    复制代码

    上面这段代码就是call的用法,这里我们可以把代码拆解成我们能看的懂的形式:

    a.show.call(objA)====>{
    obj.show=a.show();
    obj.show();
    delete obj.show();
    }

    上面就是call的类似执行的过程的形势(实际上并不是这样的,可以这样来记),知道了这个执行过程,我们就来探究这个的执行过程:

    1、把a.show里面的方法中的this全部换成obj.

    2、执行a.show(),同时把后面的参数作为参数处理。

    4、作为构造函数来使用

    复制代码
    function funcA(name){
        this.name;
        this.show=function(){
            console.log(name);
        }
    }
    var a=new funcA("hello");
    a.show();
    复制代码

     作为构造函数使用的时候,在new的关键字创建对象的时候,会先生成一个空对象,然后调用方法,把this的替换成这个空对象。(这个在上篇有详细的说明,这里不多说)。在创建对象的时候,this指针就指向了创建新对象。

    所以上面的那段代码我想应该就能看懂为什么会是这个输出结果了,唯一的有一个(objB.show = a.show)();这个比较奇怪,因为赋值的时候,返回的是右边的那个函数,所以最终执行的也是a.show();

    总结:js中的this其实是一个比较简单的东西,上面只列出了常用的东西,至于更深入的,可以自己在深入挖掘下,相信有了这个基础后,再深入的话应试就不是一件枯燥的事了

    下篇说下可以快速学习js的方面的知识。

  • 相关阅读:
    代码的测试 生产 开关 一键切换 开关
    iot表输出按主键列排序,heap表不是
    iot表输出按主键列排序,heap表不是
    iot 表主键存放所有数据,且按数据插入顺序排序
    iot 表主键存放所有数据,且按数据插入顺序排序
    iot表和heap表排序规则不同
    iot表和heap表排序规则不同
    Oracle 排序规则
    Oracle 排序规则
    perl 异步超时 打印错误
  • 原文地址:https://www.cnblogs.com/gassnake999/p/7091430.html
Copyright © 2011-2022 走看看