javascript中this的四种用法

投稿:hebedich 字体:[增加 减小] 类型:转载 时间:2015-05-11我要评论

在javascript当中每一个function都是一个对象,所以在这个里var temp=this 指的是function当前的对象。this是Javascript语言的一个关键字。它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。
 

this

在函数执行时,this 总是指向调用该函数的对象。要判断 this 的指向,其实就是判断 this 所在的函数属于谁。

在《javaScript语言精粹》这本书中,把 this 出现的场景分为四类,简单的说就是:

有对象就指向调用对象
没调用对象就指向全局对象
用new构造就指向新对象
通过 apply 或 call 或 bind 来改变 this 的所指。

1) 函数有所属对象时:指向所属对象

函数有所属对象时,通常通过 . 表达式调用,这时 this 自然指向所属对象。比如下面的例子:

1
2
3
4
5
6
7
8
9
10
11
12
var myObject = {value: 100};
myObject.getValue = function () {
 console.log(this.value); // 输出 100
 
 // 输出 { value: 100, getValue: [Function] },
 // 其实就是 myObject 对象本身
 console.log(this);
 
 return this.value;
};
 
console.log(myObject.getValue()); // => 100

getValue() 属于对象 myObject,并由 myOjbect 进行 . 调用,因此 this 指向对象 myObject。

2) 函数没有所属对象:指向全局对象

1
2
3
4
5
6
7
8
9
10
11
12
13
var myObject = {value: 100};
myObject.getValue = function () {
 var foo = function () {
  console.log(this.value) // => undefined
  console.log(this);// 输出全局对象 global
 };
 
 foo();
 
 return this.value;
};
 
console.log(myObject.getValue()); // => 100

在上述代码块中,foo 函数虽然定义在 getValue 的函数体内,但实际上它既不属于 getValue 也不属于 myObject。foo 并没有被绑定在任何对象上,所以当调用时,它的 this 指针指向了全局对象 global。

据说这是个设计错误。

3) 构造器中的 this:指向新对象

js 中,我们通过 new 关键词来调用构造函数,此时 this 会绑定在该新对象上。

1
2
3
4
5
6
7
var SomeClass = function(){
 this.value = 100;
}
 
var myCreate = new SomeClass();
 
console.log(myCreate.value); // 输出100

顺便说一句,在 js 中,构造函数、普通函数、对象方法、闭包,这四者没有明确界线。界线都在人的心中。

4) apply 和 call 调用以及 bind 绑定:指向绑定的对象

apply() 方法接受两个参数第一个是函数运行的作用域,另外一个是一个参数数组(arguments)。

call() 方法第一个参数的意义与 apply() 方法相同,只是其他的参数需要一个个列举出来。

简单来说,call 的方式更接近我们平时调用函数,而 apply 需要我们传递 Array 形式的数组给它。它们是可以互相转换的。

1
2
3
4
5
6
7
8
9
10
11
12
var myObject = {value: 100};
 
var foo = function(){
 console.log(this);
};
 
foo(); // 全局变量 global
foo.apply(myObject); // { value: 100 }
foo.call(myObject); // { value: 100 }
 
var newFoo = foo.bind(myObject);
newFoo(); // { value: 100 }

javascript中this的四种用法的更多相关文章

  1. 【转】javascript中this的四种用法

    在函数执行时,this 总是指向调用该函数的对象.要判断 this 的指向,其实就是判断 this 所在的函数属于谁. 在<javaScript语言精粹>这本书中,把 this 出现的场景 ...

  2. C#中 this关键字 四种用法

    /// <summary> /// 主程序入口 /// </summary> /// <param name="args"></param ...

  3. c++中for的四种用法

    #include <algorithm> #include <vector> #include <iostream> using namespace std; in ...

  4. Javascript中函数的四种调用方式

    一.Javascript中函数的几个基本知识点: 1.函数的名字只是一个指向函数的指针,所以即使在不同的执行环境,即不同对象调用这个函数,这个函数指向的仍然是同一个函数. 2.函数中有两个特殊的内部属 ...

  5. C#中this的 四种 用法

    C#中的this用法,相信大家应该有用过,但你用过几种?以下是个人总结的this几种用法,欢迎大家拍砖,废话少说,直接列出用法及相关代码. this用法1:限定被相似的名称隐藏的成员 /// < ...

  6. javascript中函数的四种调用模式详解

    介绍函数四种调用模式前,我们先来了解一下函数和方法的概念,其实函数和方法本质是一样,就是称呼不一样而已.函数:如果一个函数与任何对象关系,就称该函数为函数.方法:如果一个函数作为一个对象属性存在,我们 ...

  7. Javascript 中 call 的两种用法

    用法一(常见用法): 表现形式为:一个对象.方法.call(另一个对象),意义是用另一个对象代替当前对象,执行当前对象的方法.先看示例: function Class1(){ this.name = ...

  8. js中this 的四种用法

    this 在函数执行时,this 总是指向调用该函数的对象.要判断 this 的指向,其实就是判断 this 所在的函数属于谁. 在<javaScript语言精粹>这本书中,把 this  ...

  9. VBA中Option的四种用法

    1.Option Explicit.当使用Option Explicit时,必须在模块中的所有过程声明每一个变量,否则会出现语法错误并不能被编译.这样做的好处是,它能消除程序中因为错拼变量名而导致程序 ...

随机推荐

  1. BBS注册功能

    BBS注册功能 一.后端 1.组件校验数据 """ @author RansySun @create 2019-11-03-11:35 """ ...

  2. Python程序中的进程操作--—--开启多进程

    Python程序中的进程操作-----开启多进程 之前我们已经了解了很多进程相关的理论知识,了解进程是什么应该不再困难了,刚刚我们已经了解了,运行中的程序就是一个进程.所有的进程都是通过它的父进程来创 ...

  3. 小白安装Android Studio

    原文 Android Studio 安装 步骤1 - 系统要求 可以在以下的操作系统开始 Android 应用程序开发: Microsoft® Windows® 8/7/Vista/2003 (32 ...

  4. Android开发学习4

    学习内容: 1.RecyclerView 2.WebView

  5. Nuxt.js学习(二) --- Nuxt目录结构详解、Nuxt常用配置项、Nuxt路由配置和参数传递

    [TOC] 1.Nuxt目录结构详解 Nuxt项目文件目录结构 |-- .nuxt // Nuxt自动生成,临时的用于编辑的文件,build |-- assets // 用于组织未编译的静态资源入LE ...

  6. DataSet,DataTable排序(转载)

    DataSet,DataTable排序   关于对已经绑定的DataSet的排序的问题: DataSet ds=new DataSet();DataView dv=new DataView();dv. ...

  7. RedBlack-Tree(红黑树)原理及C++代码实现

    众所周知,红黑树是用途很广的平衡二叉搜索树,用过的都说好.所以我们来看看红黑树的是怎么实现的吧. 红黑树顾名思义,通过红与黑两种颜色来给每个节点上色.其中根结点和叶子结点一定是黑色的,并且红色结点的两 ...

  8. [LC] 285. Inorder Successor in BST

    Given a binary search tree and a node in it, find the in-order successor of that node in the BST. Th ...

  9. 1)关于配置centos的网络问题

    网址: http://jingyan.baidu.com/article/f3e34a12d886d2f5eb653515.html

  10. crm项目-需求分析

    ###############  crm需求分析    ############### 讲师和学生:1,批量生成上课记录,2,考勤点名,3,录入成绩,4,显示成绩5,上传作业,os模块,6,下载成绩, ...