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的方面的知识。

  • 相关阅读:
    各国语言缩写列表,各国语言缩写-各国语言简称,世界各国域名缩写
    How to see log files in MySQL?
    git 设置和取消代理
    使用本地下载和管理的免费 Windows 10 虚拟机测试 IE11 和旧版 Microsoft Edge
    在Microsoft SQL SERVER Management Studio下如何完整输出NVARCHAR(MAX)字段或变量的内容
    windows 10 x64系统下在vmware workstation pro 15安装macOS 10.15 Catelina, 并设置分辨率为3840x2160
    在Windows 10系统下将Git项目签出到磁盘分区根目录的方法
    群晖NAS(Synology NAS)环境下安装GitLab, 并在Windows 10环境下使用Git
    使用V-2ray和V-2rayN搭建本地代理服务器供局域网用户连接
    windows 10 专业版安装VMware虚拟机碰到的坑
  • 原文地址:https://www.cnblogs.com/gassnake999/p/7091430.html
Copyright © 2011-2022 走看看