js self = this的解释
Demo 1:
function Person(){
this.name = 'hjzgg';
this.age = 24;
this.show = function(){
alert(name + " " + age);
}
}
var p = new Person();
p.show();
错误:name 和 age都没有定义。
Demo 2:
function Person(){
this.name = 'hjzgg';
this.age = 24;
this.show = function(){
alert(this.name + " " + this.age);
}
}
var p = new Person();
p.show();
正确。
Demo 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 未定义。
Demo 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,正确。
Demo 5:
function Person(){
this.sayHello = function(){
alert('hello world!');
}
this.show = function(){
sayHello();
}
}
var p = new Person();
p.show();
错误:sayHello未定义。
Demo 6:
function Person(){
var sayHello = function(){
alert('hello world!');
}
this.show = function(){
sayHello();
}
}
var p = new Person();
p.show();
正确。
结论:
每个函数都有属于自己的this对象,这个this对象是在运行时基于函数的执行环境绑定的,即在全局对象中,this指向的是window对象;在自定义函数中,this对象指向的是调用这个函数的对象,也就是说,this指向的是调用执行环境的那个对象。如果是在函数嵌套环境中,this指代的是调用外部函数或者内部函数的执行环境的对象。
那么这里可能又会出现新的疑问:为什么self.name 和 self.age是正确的呢?
其实这又涉及到另一个话题:实例成员与局部成员。我们创建构造函数的意义就是要用它来创建实例,那么所有属于实例的成员都需要用this来定义;而只有那些不属于实例的成员才不会用this定义;当然,用this定义了方法以后,在函数作用域内部要调用此方法时,就需要加上this了。
Demo 7:
var person = {
name : 'hjzgg',
age : 24,
show : function(){
alert(name + " " + age);
}
}
person.show();
错误:name 和 age未定义。
Demo 8:
var person = {
name : 'hjzgg',
age : 24,
show : function(){
alert(this.name + " " + this.age);
}
}
person.show();
正确。
Demo 9:
var person = {
name : 'hjzgg',
age : 24,
show : function(){
alert(this.name + " " + this.age);
}
}
person.show.call({});
错误:name 和 age 未定义。
Demo 10:
var person = {
name : 'hjzgg',
age : 24,
show : function(){
alert(person.name + " " + person.age);
}
}
person.show.call({});
正确。
js self = this的解释的更多相关文章
- Js apply 方法 具体解释
Js apply方法具体解释 我在一開始看到javascript的函数apply和call时,很的模糊,看也看不懂,近期在网上看到一些文章对apply方法和call的一些演示样例,总算是看的有点眉目了 ...
- js 调用 oc 的解释
JavaScriptCore NSInvocation js解释器在解释函数调用时,会在执行环境进行函数搜索,主调者类型判定: 如果是js调用,直接解释执行: 如果是oc调用,则将调用打包成NSInv ...
- js中Prototype属性解释及常用方法
1.prototype的定义 javascript中的每个对象都有prototype属性,Javascript中对象的prototype属性的解释是:返回对象类型原型的引用. 每一个构造函数都有一个属 ...
- node.js基本概念简单解释
1:什么是回调函数? 2:什么是同步异步 3:什么是I/O 4:什么是单线程/多线程 5:什么是阻塞/非阻塞 6:什么是事件 7:什么是事件驱动 8:什么是事件驱动的回调 9:什么是事件循环 解释: ...
- js中的预解释
在js中,带var 和function关键字的需要预解释: 那什么是预解释?就是在js代码执行之前,先申明好带有var 关键字和带有function关键字的变量,在内存里先安排好.但是带有var关键字 ...
- js的Prototype属性 解释及常用方法
函数:原型 每一个构造函数都有一个属性叫做原型(prototype,下面都不再翻译,使用其原文).这个属性非常有用:为一个特定类声明通用的变量或者函数. prototype的定义 你不需要显式地声明一 ...
- <!--[if IE]><script type="text/javascript" src="matrix/js/html5.js"></script><![endif]-->代码解释
块注释例子 1. <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->2. <!--[if IE]> 所有的I ...
- js跨域问题解释 使用jsonp或jQuery的解决方案
js跨域及解决方案 1.什么是跨域 我们经常会在页面上使用ajax请求访问其他服务器的数据,此时,客户端会出现跨域问题. 跨域问题是由于javascript语言安全限制中的同源策略造成的. 简单来说, ...
- vue.js权威指南----代码解释实例
1:P61(值绑定) <input type="checkbox" v-model="toggle" :true-value="a" ...
随机推荐
- hello!
今天是个星期天 第一次开通了朕的博客 么么哒 感觉很困 唔~晚安zzzzz
- 【Telerik】弹出对话框RadWindow,确认删除信息
要做一个删除功能,但是删除前正常都要弹出对话框确认一下是否删除信息,防止误删信息.
- Python2 基本数据结构源码解析
Python2 基本数据结构源码解析 Contents 0x00. Preface 0x01. PyObject 0x01. PyIntObject 0x02. PyFloatObject 0x04. ...
- Linux 下安装中文 ctex 指南
大家在用 $\LaTeX$ 进行中文排版时相信会遇到不少问题,而$\textbf{ctex}$套装的出现则有效的解决了这一问题,只要安装了$\textbf{ctex}$那么在文中不用进行引用设置就可以 ...
- (转)Vsdocman7.2 注册版
Vsdocman是一个优秀的.NET源代码注释编写工具,方便的以GUI的方式设计.NET源代码的注释.我们只是大自然的搬运工:http://download.csdn.net/detail/iamyg ...
- 一、javascript中的类
1.找出对象的构造器----constructor/instanceof constructor是用模版实例化对象的时候附带的一个额外属性,这个属性指向创建该对象时所使用的javascript构造函数 ...
- Struts2
为什么要用Struts2? 这里列举一些Servlet的缺点: 1.每写一个servlet在web.xml中都要做相应的配置.如果有多很servlet,会导致web.xml内容过于繁多. 2.这样的结 ...
- java之数据结构之链表及包装类、包
链表是java中的一种常见的基础数据结构,是一种线性表,但是不会按线性的顺序存储数据,而是在每一个节点里存到下一个节点的指针.与线性对应的一种算法是递归算法:递归算法是一种直接或间接的调用自身算法的过 ...
- 设置Android Studio启动时可选最近打开过的工程
Android Studio启动时,默认会打开最近关闭的工程. 如果想Android Studio在启动时,打开欢迎界面(Welcome to Android Studio界面),则可以通过设置Set ...
- es6入门教程完整版
ECMAScript 6入门 <ECMAScript 6入门>是一本开源的JavaScript语言教程,全面介绍ECMAScript 6新引入的语法特性. 作者:阮一峰 授权:署名-非商用 ...