Javascript理解this对象
this是函数运行时自动生成的一个内部对象,只能在函数内部使用,但总指向调用它的对象。
通过以下几个例子加深对this的理解。
(1)作为函数调用
var name = 'Jenny';
function person() {
return this.name;
}
console.log(person()); //Jenny
上面这个例子在全局作用域中调用person(),此时的调用对象为window,因此this指向window,在window中定义了name变量,因此this.name相当于window.name,为Jenny。
再看下面一个例子:
function a() {
function b() {
function c() {
console.log(this);
}
c();
}
b();
}
a(); // window
这个例子中,也同为函数调用,因此this指向window。
(2)作为对象的方法调用
var name = 'Jenny';
var obj = {
name: 'Danny',
person: function() {
return this.name;
}
};
console.log(obj.person()); //Danny
在这个例子中,person()函数在obj对象中定义,调用时是作为obj对象的方法进行调用,因此此时的this指向obj,obj里面定义了name属性,值为Danny,因此this.name = "Danny"。
(3)作为构造函数调用
作为构造函数调用和普通函数调用的区别是,构造函数使用new关键字创建一个实例,此时this指向实例对象。
function person() {
return new person.prototype.init();
}
person.prototype = {
init: function() {
return this.name;
},
name: 'Brain'
};
console.log(person().name); //undefined
这是一个比较复杂的例子,涉及到了原型。
首先,创建构造函数person,为函数重新定义原型,在原型上定义了两个方法init和name,其中init返回this.name。
调用person函数的name属性,发现返回的是undefined,为什么不是Brain呢?
我们看,调用person,返回person.prototype.init()的一个实例,假设返回的这个实例名为a,那么此时的this指向的就是a,a作为person.prototype.init()的一个实例,那么所有定义在person.prototype.init()中的方法等都可以被a调用,但是name属性定义在person的原型中,而非init函数中,因此返回undefined。
(4)apply和call
使用apply()和call()可以改变调用函数的对象,第一个参数为改变后调用这个函数的对象,其中apply()的第二个参数为一个数组,call的第二个参数为每个参数。
function person() {
return this.name;
}
var obj = {
name: 'Jenny',
age: 18
};
console.log(person.apply(obj)); //Jenny
使用apply函数改变了调用person的对象,是在obj对象下面调用person,不再是在window对象下调用了,因此this指向obj,this.name = "Jenny";
参考:http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html
http://www.cnblogs.com/aaronjs/p/3278578.html
Javascript理解this对象的更多相关文章
- 全面理解Javascript中Function对象的属性和方法
http://www.cnblogs.com/liontone/p/3970420.html 函数是 JavaScript 中的基本数据类型,在函数这个对象上定义了一些属性和方法,下面我们逐一来介绍这 ...
- js对象详解(JavaScript对象深度剖析,深度理解js对象)
js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...
- Javascript对this对象的理解
在JavaScript中this表示函数运行的时候自动生成的一个内部对象,只能在函数内部使用,下面是一个简单的例子: function test(){ alert(this == window); } ...
- JavaScript 基础回顾——对象
JavaScript是基于对象的解释性语言,全部数据都是对象.在 JavaScript 中并没有 class 的概念,但是可以通过对象和类的模拟来实现面向对象编程. 1.对象 在JavaScript中 ...
- javascript中的对象,原型,原型链和面向对象
一.javascript中的属性.方法 1.首先,关于javascript中的函数/“方法”,说明两点: 1)如果访问的对象属性是一个函数,有些开发者容易认为该函数属于这个对象,因此把“属性访问”叫做 ...
- JavaScript内置对象与原型继承
(一) 理解JavaScript类定义 1>关于内置对象理解 console.log(Date.prototype.__proto__===Object.prototype //tru ...
- (转)javascript中的对象查找
本文转自:http://otakustay.com/object-lookup-in-javascript/ ---很棒的一篇文章,作者的其他文章还暂时没读,但相信作者是一个谦虚 谨慎的好工程师 近 ...
- javascript第一弹——对象
一. 什么是对象 对象是包含一组变量(称为属性)和函数(称为方法)的集合的实例. javascript中所有事物都是对象 javascript有很多内建对象 javascript允许自定义对象 对象只 ...
- 第一百一十三节,JavaScript文档对象,DOM基础
JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...
随机推荐
- php时间戳之间相互转换
第一种情况: 将时间戳转换成年月日格式 <?php echo date('Y-m-d H:i:s',$v['apply_time']);?> 第二种情况: 将年月日转换成时间戳 strto ...
- oracle迁移postgres之-Ora2Pg
描述 Ora2Pg:甲骨文PostgreSQL数据库模式转换器是一个免费的工具用于Oracle数据库迁移到PostgreSQL兼容模式.它连接Oracle数据库,扫描它自动提取其结构或数据,然后生成S ...
- maven的使用--初级篇
一.前言 早就知道maven 在java 项目的管理方面名声显赫,于是就想着学习掌握之,于是查阅了大量文档.发现这些文档的作者都是java 的大腕,大多都是站在掌握了一定maven 基 ...
- js爬虫心得
第一步:分析要爬的网站:包括是否需要登陆.点击下一页的网址变化.下拉刷新的网址变化等等 第二步:根据第一步的分析,想好爬这个网站的思路 第三步:爬好所需的内容 保存 爬虫过程中用到的一些包: (1)c ...
- ML-线性回归
记样本数目为$m$,样本点$i$用$(x^{(i)}, y^{(i)})$表示,其中 $x^{(i)}=\begin{pmatrix}x_1^{(i)}\\ x_2^{(i)}\\ ...\\x_n^ ...
- [转载]Back up all of your mysql databases nightly
原文地址:http://www.linuxbrigade.com/back-up-all-of-your-mysql-databases-nightly/ Put the following into ...
- RStudio中,出现中文乱码问题的解决方案
RStudio中,出现中文乱码问题的解决方案解决步骤:1.设置RStudio文本显示的默认编码:RStudio菜单栏的Tools -> Global Options2.选择General -&g ...
- JSP Filter用法
1.filter的作用 在HttpServletRequest请求到达Servlet之前,拦截客户的HttpServletRequest 根据需要检查HttpServletRequest的相关信息,修 ...
- Xmemcached的FAQ和性能调整建议
转载 http://www.blogjava.net/killme2008/archive/2014/02/13/325564.html 一.XMemcached是什么?经常碰到的一个问题是很多朋友对 ...
- 创建EF数据模型
最后的应用程序,看上去就像下边这样: 创建数据模型,你将从以下三个类开始: 在Models文件夹,新建以下类: using System; using System.Collections.Gener ...