1、全局代码中的this  是指向全局对象,在浏览器中是window

alert(this)   //window

2、作为单纯的函数调用:

  function fooCoder(x) {
this.x = x;
}
fooCoder();
alert(x);// 全局变量x值为2

在普通函数中的this,指向了全局函数,即window ,在严格模式下,是undefined

3、作为对象的方法调用:

var name = "clever coder";
var person = {
name : "foocoder",
hello : function(sth){
console.log(this.name + " says " + sth);
}
}
person.hello("hello world");

输出 foocoder says hello world。this指向person对象,即当前对象。

4、作为构造函数:

new FooCoder(); 

函数内部的this指向新创建的对象

5、内部函数

var name = "clever coder";
var person = {
name : "foocoder",
hello : function(sth){
var sayhello = function(sth) {
console.log(this.name + " says " + sth);
};
sayhello(sth);
}
}
person.hello("hello world");//clever coder says hello world

在内部函数中,this没有按预想的绑定到外层函数对象上,而是绑定到了全局对象。这里普遍被认为是JavaScript语言的设计错误,因为没有人想让内部函数中的this指向全局对象。一般的处理方式是将this作为变量保存下来,一般约定为that或者self:

var name = "clever coder";
var person = {
name : "foocoder",
hello : function(sth){
var that = this;
var sayhello = function(sth) {
console.log(that.name + " says " + sth);
};
sayhello(sth);
}
}
person.hello("hello world");//foocoder says hello world

6、使用apply和call设置this

person.hello.call(person, "world")

apply和call类似,只是后面的参数是通过一个数组传入,而不是分开传入。两者的方法定义:

call( thisArg [,arg1,arg2,… ] );  // 参数列表,arg1,arg2,...
apply(thisArg [,argArray] ); // 参数数组,argArray

两者都是将某个函数绑定到某个具体对象上使用,自然此时的this会被显式的设置为第一个参数。

总结this:

1.当函数作为对象的方法调用时,this指向该对象。

2.当函数作为淡出函数调用时,this指向全局对象(严格模式时,为undefined)

3.构造函数中的this指向新创建的对象

4.嵌套函数中的this不会继承上层函数的this,如果需要,可以用一个变量保存上层函数的this。

再总结的简单点,如果在函数中使用了this,只有在该函数直接被某对象调用时,该this才指向该对象。

  1. obj.foocoder();
  2. foocoder.call(obj, ...);
  3. foocoder.apply(obj, …);

原文地址:http://www.cnblogs.com/aaronjs/archive/2011/09/02/2164009.html#_h1_6

JS中的this都有什么作用?的更多相关文章

  1. JS-04 JS中的函数都是按值传递的

    JS中的函数都是按值传递的 1.传递参数是基本类型 如例子:基本类型传入函数后,函数内部参数生成一个参数副本,把num变量的值赋给num参数,num参数再去参与函数中的运算,但不会影响外面num变量的 ...

  2. 快速理解js中的call,apply的作用

    今天被人问到js中的call,apply的区别和用途,解释了一番后,想到之前在逼乎上看到一位小伙伴生动形象的解释 本身不难理解,看下MDN就知道了,但是不常用,遇到了,还要脑回路回转下.或者时间长了, ...

  3. js中 setTimeout延时0毫秒的作用

    经常看到setTimeout延时0ms的javascript代码,感到很迷惑,难道延时0ms和不延时不是一个道理吗?后来通过查资料以及实验得出以下两个作用,可能还有作用我还不知道,希望得知的朋友在后面 ...

  4. JS中的进制转换以及作用

    js的进制转换, 分为2进制,8进制,10进制,16进制之间的相互转换, 我们直接利用 对象.toString()即可实现: //10进制转为16进制 ().toString() // =>&q ...

  5. js 中的console.log有什么作用

    主要是方便你调式javascript用的.你可以看到你在页面中输出的内容. 相比alert他的优点是: 他能看到结构话的东西,如果是alert,淡出一个对象就是[object object],但是co ...

  6. js中数组常用的api 及其作用

  7. 关于js中空值比较和传值的问题

    昨天写导出功能时,有个条件审核状态,其中一个审核状态的key为0,我也是醉了. 然后我注意到这方面的问题,在网上找了找,我的理解可能有点问题.但是目前也就是这样了,以后在学习吧! 正文: js中各种类 ...

  8. 判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解

    提醒大家,Object.prototype.toString().call(param)返回的[object class]中class首字母是大写,像JSON这种甚至都是大写,所以,大家判断的时候可以 ...

  9. js中的call、apply、bind

    在js中每个函数都包含两个非继承而来的方法:call()和apply() call和apply的作用都是在特定的作用域中将函数绑定到另外一个对象上去运行,即可以用来重新定义函数的执行环境,两者仅在定义 ...

随机推荐

  1. 2014.12.01 B/S 使用VS建立Web网站

    要求:从hr数据库info表读取数据,在Web网站中显示为如图: 用DW绘制一个表格,然后将代码拷贝到新建的网站主页代码中 <div> <table bgcolor=" w ...

  2. 网上B2C书城,1.0javaWEB版!!好几天没更新了,都忙着做那个网站了~

    惯例帮师傅打个广告www.java1234.com,从基础学习java WEB! 从最初的构思,到一点点功能的实现,真是不容易啊,由于自己没有项目经验,完全依靠自己的感觉,以及自己琢磨出来的思路来写, ...

  3. [STL源码剖析]RB-tree的插入操作

    RB-tree的性质 对于RB-tree,首先做一个了解,先看一张维基百科的RB-tree: 再看RB-tree的性质: 性质1. 节点是红色或黑色. 性质2. 根是黑色,所有叶子都是黑色(叶子节点指 ...

  4. leetcode Binary Tree Postorder Traversal python

    # Definition for a binary tree node. # class TreeNode(object): # def __init__(self, x): # self.val = ...

  5. Linux学习之rcp命令

    rcp代表“remote file copy”(远程文件拷贝).该命令用于在计算机之间拷贝文件.rcp命令有两种格式.第一种格式用于文件到文件的拷贝:第二种格式用于把文件或目录拷贝到另一个目录中. 1 ...

  6. 各种数据库的批量插入操作_Oracle

    最近工作中需要优化以前各种的Excel批量导入功能,目前将能优化的方面做个记录. 选用技术: 目前.Net可以访问Oracle常用的Dll,有三种: 微软自带的 System.Data.OracleC ...

  7. Why Study JavaScript?

    JavaScript is one of the 3 languages all web developers must learn: 1. HTML to define the content of ...

  8. [转载]node.js express 4.x 安装指南,没有自动配置环境变量的问题

    前几天express 推出了4.0,得知这个消息,自己尝试了一下,突然发现用以前的文档上的操作出现了各种问题.结果只能去看文档,现在在这个给大家分享下4.0版本的安装. 先说下如果需要用express ...

  9. 如何将js与HTML完全脱离

    先举出一个例子: var sound='Roar!'; function myOrneryBeast(){ alert(this); this.style.color='green';//this指代 ...

  10. 分析java中clone()方法 (转载+修改)

    Java中的clone() 方法 java所有的类都是从java.lang.Object类继承而来的,而Object类提供下面的方法对对象进行复制. protected native Object c ...