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({});
复制代码

  正确。

目录
相关文章
|
4月前
|
JavaScript
js中?.、??的具体用法
js中?.、??的具体用法
67 0
|
5月前
|
JavaScript 前端开发 API
|
7月前
|
XML JavaScript 前端开发
JS的简介和作用还有为什么会产生JS?
JS的简介和作用还有为什么会产生JS?
61 2
|
8月前
|
JavaScript 数据格式
你不知道的js中“.“的作用
你不知道的js中“.“的作用
js-day01js引入输出&数据类型
js-day01js引入输出&数据类型
|
JavaScript 前端开发 网络架构
JS基础-函数
简单应用,通过key获得value set()新增或修改 delete()删除
81 0
|
存储 JSON JavaScript
JS基础-方法
方法就是把函数放在对象的里面,对象只有两个东西:属性和方法
93 0
|
JavaScript
常用js指令及案例
常用js指令及案例
常用js指令及案例
|
JavaScript
一些 JS 代码片段(方法)
一些 JS 代码片段(方法)
82 0
|
机器学习/深度学习 前端开发 JavaScript
用JS解释JS!详解AST及其应用
本片文章主要介绍了AST以及它的工作模式,同时体验利用 AST 所达成的惊艳能力。
用JS解释JS!详解AST及其应用