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

  正确。

目录
相关文章
|
9月前
|
SQL 消息中间件 Serverless
​Flink+Paimon+Hologres,面向未来的一体化实时湖仓平台架构设计
​Flink+Paimon+Hologres,面向未来的一体化实时湖仓平台架构设计
273 4
|
12月前
|
运维 网络安全 Python
自动化运维:使用Ansible实现批量服务器配置
在快速迭代的IT环境中,高效、可靠的服务器管理变得至关重要。本文将介绍如何使用Ansible这一强大的自动化工具,来简化和加速批量服务器配置过程。我们将从基础开始,逐步深入到更复杂的应用场景,确保即使是新手也能跟上节奏。文章将不包含代码示例,而是通过清晰的步骤和逻辑结构,引导读者理解自动化运维的核心概念及其在实际操作中的应用。
|
存储 小程序 云计算
云计算概念与架构设计介绍
云计算概念与架构设计介绍
|
SQL 监控 关系型数据库
如何查看MySQL使用的内存
综合运用上述方法,您可以全方位地监控和管理MySQL的内存使用。从简单查看配置到深入分析实时内存占用,每种方法都有其适用场景和优势。定期检查和调整MySQL的内存配置,对于维持数据库性能和稳定性至关重要。
1588 0
|
前端开发 JavaScript 定位技术
JavaScript 等待异步请求数据返回值后,继续执行代码 —— async await Promise的使用方法
JavaScript 等待异步请求数据返回值后,继续执行代码 —— async await Promise的使用方法
350 1
|
JavaScript Ubuntu 应用服务中间件
如何在Ubuntu20.04上配置Nginx以及使用Nginx部署一个网站
本文主要介绍了关于如何部署Ubuntu环境下的网站,给出一种示例。
如何在Ubuntu20.04上配置Nginx以及使用Nginx部署一个网站
|
JavaScript 安全 前端开发
错误处理:在Vue中捕获和处理异常
【4月更文挑战第24天】Vue.js开发中,错误和异常处理对于保持用户体验和应用稳定性至关重要。Vue提供`errorCaptured`钩子函数,可在组件及其子组件中捕获错误,通过参数进行处理。例如,在`App`组件中定义`errorCaptured`,调用自定义`handleError`方法记录错误。此外,可使用`try...catch`处理异步错误,全局错误处理则可通过`Vue.config.errorHandler`设置。结合这些机制,开发者能有效管理错误,提升应用的稳定性和易维护性。
613 7
|
Web App开发 Python
谷歌版本升级重新安装配置chromedriver
谷歌版本升级重新安装配置chromedriver
智能排班系统 【管理系统功能、操作说明——中篇】
智能排班系统 【管理系统功能、操作说明——中篇】
508 1
|
前端开发
ant design upload实现多个文件一次上传(全网首发)
ant design upload实现多个文件一次上传(全网首发)
1541 0