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

  正确。










本文转自 小眼儿 博客园博客,原文链接:http://www.cnblogs.com/hujunzheng/p/5330486.html,如需转载请自行联系原作者
目录
相关文章
|
JavaScript 前端开发 编译器
js开发: 请解释什么是Babel,以及它在项目中的作用。
**Babel是JavaScript编译器,将ES6+代码转为旧版JS以保证兼容性。它用于前端项目,功能包括语法转换、插件扩展、灵活配置和丰富的生态系统。Babel确保新特性的使用而不牺牲浏览器支持。** ```markdown - Babel: JavaScript编译器,转化ES6+到兼容旧环境的JS - 保障新语法在不同浏览器的运行 - 支持插件,扩展编译功能 - 灵活配置,适应项目需求 - 富强的生态系统,多样化开发需求 ```
175 4
|
开发框架 JavaScript 安全
js开发:请解释什么是Express框架,以及它在项目中的作用。
【4月更文挑战第24天】Express是Node.js的Web开发框架,简化路由管理,支持HTTP请求处理。它包含中间件系统用于日志、错误处理和静态文件服务,集成多种模板引擎如EJS、Jade、Pug。框架还提供安全中间件提升应用安全,并具有良好的可扩展性,便于项目功能扩展和开发效率提升。
427 3
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
264 3
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素传递,而事件捕获则从外层元素向内层传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。示例代码展示了如何设置。
221 2
|
JavaScript
Vue.js中使用.self修饰符来限制事件处理程序的作用域
Vue.js中使用.self修饰符来限制事件处理程序的作用域
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的actual self 服装店附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的actual self 服装店附带文章和源代码部署视频讲解等
179 8
|
JavaScript
Vue.js中使用.self修饰符来处理事件冒泡
Vue.js中使用.self修饰符来处理事件冒泡
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【6月更文挑战第15天】JavaScript的`this`根据调用方式变化:非严格模式下直接调用时指向全局对象(浏览器为window),严格模式下为undefined。作为对象方法时,`this`指对象本身。用`new`调用构造函数时,`this`指新实例。`call`,`apply`,`bind`可显式设定`this`值。箭头函数和绑定方法有助于管理复杂场景中的`this`行为。
159 3
|
JavaScript 前端开发
js中改变this指向、动态指定函数 this 值的方法
js中改变this指向、动态指定函数 this 值的方法
|
JavaScript 前端开发
深入探索JavaScript:如何改变this的指向
深入探索JavaScript:如何改变this的指向
257 2

热门文章

最新文章