zoukankan      html  css  js  c++  java
  • js this

    由于 Javascript(简称:JS)中的 this 理解起来较为复杂,使得很多入门新手和一些进入前端圈子有些年限的工程师们都对其的用法有些模糊。所以今天为大家带来 Javascript(简称:JS) 中 this 的用法详解。
    
    this 永远指向 调用 包含 自己(this本身) 的 函数 对应的对象。
    也就是说,包含 this 的函数 只在乎是谁调用了它,跟在哪里进行的函数声明没有关系。
    
    下面就来举个例子说明:
    
    function test(){
        var a = 1;
        console.log(this.a);
    }
    
    test(); //undefined
    如果函数在最外层直接运行,默认绑定的对象是 window,因为 test() 是被window对象调用的,所以这里的 this.a 对应的应该是 全局变量(或者叫window变量) 而不是test函数里的局部变量,由于 在 window 对象中没有声明 变量a,所以输出 undefined。
    
    下面我们对代码进行改造一下:
    
    var a = 2; //window对象下的变量
    
    function test(){
        var a = 1;
        console.log(this.a);
    }
    
    test(); // 打印结果为 2
    下面再来分析一个经典的例子:
    
    var name = 'China';
    var obj = {
        name : 'America',
        show : function() {
            console.log(this.name)
        }
    }
    
    obj.show(); // America
    从上述代码可以看出,包含 this 的函数是 show(),而show()函数通过对象obj调用的,所以 this.name 指向 obj 中的 name(America);
    
    我们再来对代码进行改造:
    
    var name = 'China';
    var obj = {
        name : 'America',
        show : function() {
            return function(){
                console.log(this.name);
            }
        }
    }
    
    var a = obj.show();
    a(); // China
    这里的 obj.show() 返回的是一个匿名函数
    
    function(){
        console.log(this.name);
    }
    然后赋值给 变量a,等价于:
    
    var a = function(){
        console.log(this.name);
    }
    
    或
    
    function a(){
        console.log(this.name);
    }
    所以 最后执行的 a()== window.a(), 函数a 里面的 this.name 指向 window.name('China'),所以最终输出 China。
    
    看到这里,相信大家对 this 已经有个比较清楚的认识了,下面给大家介绍4种 this 常用的场景。
    1. 在一般函数方法中使用 this 指代全局对象
    
    function test(){
      this.x = 1;
      alert(this.x);
    }
    test(); // 1
    2. 作为对象方法调用,this 指代上级对象
    
    function test(){
      alert(this.x);
    }
    
    var obj = {};
    
    obj.x = 1;
    obj.m = test;
    obj.m(); // 1
    3. 作为构造函数调用,this 指向 new 出的对象
    
    function test(){
        this.name = 'China';
    }
    
    var t = new test();
    console.log(t.name); //'China'
    4. apply, call 调用
    function Animal(){
        this.name = 'animal';
    }
    
    function Cat(){
        Animal.call(this);
    }
    
    var cat = new Cat();
    console.log(cat.name);// 'animal'
    以上便是 this 全部的解答。
  • 相关阅读:
    SPS安装过程中配置服务器场帐户设置页面不能正常显示以及IIS中SPS管理站点未配置成功问题的原因
    Outlook中时间的自然语言支持
    hashtable与HashMap区别
    IE浏览器Encoding Autoselect,UTF8编码的中文页面白屏
    ASP.NET中Web DataGrid的使用指南
    HTML+CSS模拟的Tab控件
    DIV+CSS定位之相对定位与绝对定位
    javascript中apply方法
    Windows工作流基类库(WF)探密
    中国居民身份证号码验证
  • 原文地址:https://www.cnblogs.com/xiaowie/p/11613086.html
Copyright © 2011-2022 走看看