js self = this的解释-阿里云开发者社区

开发者社区> 开发与运维> 正文

js self = this的解释

简介:

vDemo 1:

复制代码
  function Person(){
        this.name = 'hjzgg';
        this.age = 24;

        this.show = function(){
            alert(name + " " + age);
        }
    }

    var p = new Person();
    p.show();
复制代码

  错误:name 和 age都没有定义。

vDemo 2:

复制代码
  function Person(){
        this.name = 'hjzgg';
        this.age = 24;

        this.show = function(){
            alert(this.name + " " + this.age);
        }
    }

    var p = new Person();
    p.show();
复制代码

  正确。

vDemo 3:

复制代码
  function Person(){
        this.name = 'hjzgg';
        this.age = 24;

        this.show = function(){
            alert(this.name + " " + this.age);
        }
    }

    var p = new Person();
    p.show.call({});
复制代码

  错误:name 和 age 未定义。

vDemo 4:

复制代码
  function Person(){
        this.name = 'hjzgg';
        this.age = 24;

        var self = this;

        this.show = function(){
            alert(self.name + " " + self.age);
        }
    }

    var p = new Person();
    p.show.call({});
复制代码

  通过 var self = this,正确。

 

vDemo 5:

复制代码
  function Person(){
        this.sayHello = function(){
            alert('hello world!');
        }

        this.show = function(){
            sayHello();
        }
    }

    var p = new Person();
    p.show();
复制代码

  错误:sayHello未定义。

vDemo 6:

复制代码
  function Person(){
        var sayHello = function(){
            alert('hello world!');
        }

        this.show = function(){
            sayHello();
        }
    }

    var p = new Person();
    p.show();
复制代码

  正确。

  

v结论:

  每个函数都有属于自己的this对象,这个this对象是在运行时基于函数的执行环境绑定的,即在全局对象中,this指向的是window对象;在自定义函数中,this对象指向的是调用这个函数的对象,也就是说,this指向的是调用执行环境的那个对象。如果是在函数嵌套环境中,this指代的是调用外部函数或者内部函数的执行环境的对象。
那么这里可能又会出现新的疑问:为什么self.name 和 self.age是正确的呢?
其实这又涉及到另一个话题:实例成员与局部成员。我们创建构造函数的意义就是要用它来创建实例,那么所有属于实例的成员都需要用this来定义;而只有那些不属于实例的成员才不会用this定义;当然,用this定义了方法以后,在函数作用域内部要调用此方法时,就需要加上this了。

vDemo 7:

复制代码
 var person = {
        name : 'hjzgg',
        age : 24,
        show : function(){
            alert(name + " " + age);
        }

   }

   person.show();
复制代码

  错误:name 和 age未定义。

vDemo 8:

复制代码
 var person = {
        name : 'hjzgg',
        age : 24,
        show : function(){
            alert(this.name + " " + this.age);
        }

   }

   person.show();
复制代码

  正确。

vDemo 9:

复制代码
 var person = {
        name : 'hjzgg',
        age : 24,
        show : function(){
            alert(this.name + " " + this.age);
        }

   }

   person.show.call({});
复制代码

  错误:name 和 age 未定义。

vDemo 10:

复制代码
var person = {
        name : 'hjzgg',
        age : 24,
        show : function(){
            alert(person.name + " " + person.age);
        }

   }

   person.show.call({});
复制代码

  正确。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章