在JavaScript中,this关键字是用来引用 调用该函数的 那个对象的。看几个栗子:

var name="Window";
var obj={
name:"Object",
funObj:function(){
console.log(this.name);
}
};
//
var funObjCopy=obj.funObj;
function a(){
console.log(this.name);
}
obj.aCopy=a; //Object
obj.funObj();
//Window
funObjCopy();
//Window
a();
//Object
obj.aCopy();

从上面的例子可以看出,this引用的是 调用该函数时“.”前面的那个对象(如 obj.funObj()、obj.aCopy() );如果没有通过“.”的方式而是直接调用,那么this引用的就是全局对象,换句话说,如果这个对象是一个函数调用对象或者全局对象,那么将得到对全局对象的引用;

接下来是个在嵌套函数中使用this的栗子:

var name="Window";
function test(){
var name="test01";
console.log(name);
console.log(this.name);
function funF(){
var name="test02";
console.log(name);
console.log(this.name);
}
funF();
} //test01 Window test02 Window
test();

注意funF函数中打印this.name得到的依然是Window;再来看一个类似例子:

var name="Window";
var obj={
name:"Object",
funObj:function(){
var name="Function";
function funF(){
return this;
}
console.log(name);
console.log(this.name);
console.log(funF().name);
}
}; //Function Object Window
obj.funObj();

注意这个例子中funF函数返回的是window对象,所以打印的结果依然是Window;由此我们可以得出:在方法内嵌套的函数中使用this,仍然会得到对全局对象的引用(除了通过“.”方式调用的)。

突然想到了call()和apply()方法,顺便记一下了

每个函数都包含两个非继承而来的方法:call()和apply();这两个方法的作用是一样的,都是为了在特定的作用域中调用函数,换句话说其实就是设置函数体内this对象的值。区别就在于apply()只接受两个参数,第一个和call()一样,都是指定this对象的值,另一个是必须是参数数组(可以是Array的实例,也可以是arguments对象);而call()方法的参数则必须逐个列举出来,将就第一个例子来看看:

var name="Window";
var obj={
name:"Object",
funObj:function(){
var name="Function";
console.log(this.name);
}
};
function a(){
console.log(this.name);
} //Window
a();
//Object
a.call(obj);
//Object
a.bind(obj);

理解JavaScript中的this的更多相关文章

  1. 理解JavaScript中的原型继承(2)

    两年前在我学习JavaScript的时候我就写过两篇关于原型继承的博客: 理解JavaScript中原型继承 JavaScript中的原型继承 这两篇博客讲的都是原型的使用,其中一篇还有我学习时的错误 ...

  2. 深入理解JavaScript中创建对象模式的演变(原型)

    深入理解JavaScript中创建对象模式的演变(原型) 创建对象的模式多种多样,但是各种模式又有怎样的利弊呢?有没有一种最为完美的模式呢?下面我将就以下几个方面来分析创建对象的几种模式: Objec ...

  3. 深入理解JavaScript中的属性和特性

    深入理解JavaScript中的属性和特性 JavaScript中属性和特性是完全不同的两个概念,这里我将根据自己所学,来深入理解JavaScript中的属性和特性. 主要内容如下: 理解JavaSc ...

  4. 深入理解javascript中执行环境(作用域)与作用域链

    深入理解javascript中执行环境(作用域)与作用域链 相信很多初学者对与javascript中的执行环境与作用域链不能很好的理解,这里,我会按照自己的理解同大家一起分享. 一般情况下,我们把执行 ...

  5. 【干货理解】理解javascript中实现MVC的原理

    理解javascript中的MVC MVC模式是软件工程中一种软件架构模式,一般把软件模式分为三部分,模型(Model)+视图(View)+控制器(Controller); 模型:模型用于封装与应用程 ...

  6. 理解javascript中的策略模式

    理解javascript中的策略模式 策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换. 使用策略模式的优点如下: 优点:1. 策略模式利用组合,委托等技术和思想,有效 ...

  7. 深入理解javascript中的立即执行函数(function(){…})()

    投稿:junjie 字体:[增加 减小] 类型:转载 时间:2014-06-12 我要评论 这篇文章主要介绍了深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是 ...

  8. 转载 深入理解JavaScript中的this关键字

    转载原地址: http://www.cnblogs.com/rainman/archive/2009/05/03/1448392.html 深入理解JavaScript中的this关键字   1. 一 ...

  9. js架构设计模式——理解javascript中的MVVM开发模式

    理解javascript中的MVVM开发模式 http://blog.csdn.net/slalx/article/details/7856769 MVVM的全称是Model View ViewMod ...

  10. 全面理解Javascript中Promise

    全面理解Javascript中Promise 最近在学习Promise的时候,在网上收集了一些资料,发现很多的知识点不够系统,所以小编特意为大家整理了一些自认为 比较好的文章,供大家更好地学习js中非 ...

随机推荐

  1. python函数-语句

    一.def语句和参数 #!/usr/bin/env python #coding:utf-8 def hello(name): print('Hello ' +name) hello('dingkai ...

  2. Makefile project

    1 Makefile里出现IDF_PATH,所以要在工程属性里的environment环境变量添加IDF_PATH,对其解释,指出路径. 2  项目中用了shell文本,如果用Python 语言,要确 ...

  3. JDK的下载与Java运行环境

    JDK简介 什么是JDK JDK是Java Development Kit的缩写,意思是Java开发工具包.JDK就好比作人的心脏,人没有了心脏,生命也就失去存在的意义.Java也一样,JDK就是它的 ...

  4. 移动端1像素解决方法,根据媒体查询transform缩放

    .borderOnePx{ position: relative; } .borderOnePx::after { content: ''; height:1px; background:#000; ...

  5. Reactjs 列表优化的一些心得

    前言 在应用开发中,列表是我们使用频率非常高的一种展现形式,在reactjs项目中更是如此.无处不在的使用更是需要我们小心触发性能瓶颈的深水炸弹. 下面就我最近的总结出的几点心得分享给大家,有什么问题 ...

  6. Vue+axios+Node+express实现文件上传(用户头像上传)

    Vue 页面的代码 <label for='my_file' class="theme-color"> <mu-icon left value="bac ...

  7. 【数据库运维】数据库(server)的时区设置及世界主要地区的时区

    [时区设置不当会有什么问题] 当进行海外项目运维的时候,常常会遇到时区设置的问题.假设时区设置不当 或者 同样项目的server之间的时区不一致,都会有导致项目的数据异常的风险. 假设数据表的字段使用 ...

  8. 【转载】JDK8 特性 stream(),lambda表达式,

    Stream()表达式 虽然大部分情况下stream是容器调用Collection.stream()方法得到的,但stream和collections有以下不同: 无存储.stream不是一种数据结构 ...

  9. 获取用户真实IP:(模拟:客户端--F5--nginx--tomcat 后端获取用户真实IP)

    模拟:客户端--F5--nginx--tomcat 后端获取用户真实IP 192.168.109.137 :nginx01(充当第一层代理==F5)192.168.109.138 :nginx02(二 ...

  10. pandas数据读取(DataFrame & Series)

    1.pandas数据的读取 pandas需要先读取表格类型的数据,然后进行分析 数据说明 说明 pandas读取方法 csv.tsv.txt 用逗号分割.tab分割的纯文本文件 pd.read_csv ...