12.谈谈this对象的理解

时间:2022-09-04 22:29:14
1.谈谈this对象的理解?
2.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

12.谈谈this对象的理解的更多相关文章

  1. 谈谈对Javascript构造函数和原型对象的理解

    对象,是javascript中非常重要的一个梗,是否能透彻的理解它直接关系到你对整个javascript体系的基础理解,说白了,javascript就是一群对象在搅..(哔!).   常用的几种对象创 ...

  2. JS function的定义方法,及function对象的理解。

    废话篇: 今天看到了Function的内容,各种晕,各种混淆有木有.简直是挑战个人脑经急转弯的极限啊.不过,最终这一难题还是被我攻克了,哇咔咔.现在就把这东西记下来,免得到时候又忘了就悲催了.... ...

  3. EC笔记:第二部分:12、复制对象时勿忘其每一个成分

    EC笔记:第二部分:12.复制对象时勿忘其每一个成分 1.场景 某些时候,我们不想使用编译器提供的默认拷贝函数(包括拷贝构造函数和赋值运算符),考虑以下类定义: 代码1: class Point{ p ...

  4. Jsp(3):内置对象和四种域对象的理解

    由来:在jsp开发中,会频繁使用到一些对象 .例如HttpSession,ServletContext,ServletContext,HttpServletRequet.所以Sun公司设计Jsp时,在 ...

  5. 谈谈对XML的理解?说明Web应用中Web.xml文件的作用?

    谈谈对XML的理解?说明Web应用中Web.xml文件的作用? 解答:XML(Extensible Markup Language)即可扩展标记语言,它与HTML一样,都是SGML(Standard ...

  6. 谈谈你对this对象的理解

    理解: 1.this是js 的一个关键字,随着函数的使用场合的不同,this 的值会发生变化. 2.一个总原则:即this指的是调用函数的那个对象. 3.一般情况下,this 是全局对象,可以作为方法 ...

  7. 谈谈你对This对象的理解?

    1.this总是指向函数的直接调用者(而非间接调用者):2.如果有new关键字,this指向new出来的那个对象:3.在事件中,this指向触发这个事件的对象,特殊的是,IE中的attachEvent ...

  8. 谈谈对BPM的理解

    BPM的产生缘由 近年来,随着计算机技术的发展和互联网时代的到来,我们已经进入了信息时代,也称为数字化时代,在这数字化的时代里,企业的经营管理都受到了极大的挑战.从上世纪90年代起至今,企业的信息化工 ...

  9. javascript对象的理解

    从代码中体会javascript中的对象: <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

随机推荐

  1. 耿丹CS16-2班第四次作业汇总

    Deadline: 2016-10-13 12:00 作业内容 实验3-1 分别使用while循环.do while循环.for循环求1+2+3+ --+100. 实验3-2 分别使用while循环. ...

  2. jquery&period;form&period;js不能解决连接超时(timeout)的解决方法

    最近在使用jquery.form.js提交包含文件的表单时,碰到了一个问题:当碰上网速较慢时,而我们又设置了timeout时,例如: var options = { timeout: 3000 //限 ...

  3. android listview 的监听事件

    今天遇到了一个比较让我头疼的问题,不过追根揭底只是我对listview理解的不够透彻罢了, 闲言少叙,说说我遇到的问题吧: 上篇随笔我写了关于listview的使用,如果你也已经写好了列表那么恭喜这一 ...

  4. 使用 Object&period;create 创建对象,super 关键字,class 关键字

    ECMAScript 5 中引入了一个新方法:Object.create().可以调用这个方法来创建一个新对象.新对象的原型就是调用 create 方法时传入的第一个参数: var a = {a: 1 ...

  5. 最大权闭合图最大获益(把边抽象为点)HDU3879

    题意:给出一个无向图,每个点都有点权值代表花费,每条边都有利益值,代表形成这条边就可以获得e[i]的利益,问选择那些点可以获得最大利益是多少? 分析:把边抽象成点,s与该点建边,容量是利益值,每个点与 ...

  6. CSS笔记(十五)CSS3之用户界面

    参考:http://www.w3school.com.cn/css3/css3_user_interface.asp 在 CSS3 中,新的用户界面特性包括重设元素尺寸.盒尺寸以及轮廓等. 新的用户界 ...

  7. Chapter 1 Mr&period;Sherlock Holmes

    I took my degree of Doctor of Medicine in the University of London, and proceeded to Netley to go th ...

  8. C&num;方法中参数ref和out的解析

    一.C#方法中参数类型 有4种参数类型,有时候很难记住它们的不同特征,下图对它们做一个总结,使之更容易比较和对照. 二.C#方法中的参数 1.值参数 使用值参数,通过复制实参的值到形参的方式把数据传递 ...

  9. OpenCV &plus; Python 人脸检测

    必备知识 Haar-like opencv api 读取图片 灰度转换 画图 显示图像 获取人脸识别训练数据 探测人脸 处理人脸探测的结果 实例 图片素材 人脸检测代码 人脸检测结果 总结 下午的时候 ...

  10. jquery笔记整理

    01-jquery简介 1)功能:     ·html元素选取     ·Html元素操作     ·Css操作     ·Html事件函数     ·JavaScript特效和动画     ·DOM ...