javascript中this的四种用法
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); |
javascript中this的四种用法的更多相关文章
- 【转】javascript中this的四种用法
在函数执行时,this 总是指向调用该函数的对象.要判断 this 的指向,其实就是判断 this 所在的函数属于谁. 在<javaScript语言精粹>这本书中,把 this 出现的场景 ...
- C#中 this关键字 四种用法
/// <summary> /// 主程序入口 /// </summary> /// <param name="args"></param ...
- c++中for的四种用法
#include <algorithm> #include <vector> #include <iostream> using namespace std; in ...
- Javascript中函数的四种调用方式
一.Javascript中函数的几个基本知识点: 1.函数的名字只是一个指向函数的指针,所以即使在不同的执行环境,即不同对象调用这个函数,这个函数指向的仍然是同一个函数. 2.函数中有两个特殊的内部属 ...
- C#中this的 四种 用法
C#中的this用法,相信大家应该有用过,但你用过几种?以下是个人总结的this几种用法,欢迎大家拍砖,废话少说,直接列出用法及相关代码. this用法1:限定被相似的名称隐藏的成员 /// < ...
- javascript中函数的四种调用模式详解
介绍函数四种调用模式前,我们先来了解一下函数和方法的概念,其实函数和方法本质是一样,就是称呼不一样而已.函数:如果一个函数与任何对象关系,就称该函数为函数.方法:如果一个函数作为一个对象属性存在,我们 ...
- Javascript 中 call 的两种用法
用法一(常见用法): 表现形式为:一个对象.方法.call(另一个对象),意义是用另一个对象代替当前对象,执行当前对象的方法.先看示例: function Class1(){ this.name = ...
- js中this 的四种用法
this 在函数执行时,this 总是指向调用该函数的对象.要判断 this 的指向,其实就是判断 this 所在的函数属于谁. 在<javaScript语言精粹>这本书中,把 this ...
- VBA中Option的四种用法
1.Option Explicit.当使用Option Explicit时,必须在模块中的所有过程声明每一个变量,否则会出现语法错误并不能被编译.这样做的好处是,它能消除程序中因为错拼变量名而导致程序 ...
随机推荐
- BBS注册功能
BBS注册功能 一.后端 1.组件校验数据 """ @author RansySun @create 2019-11-03-11:35 """ ...
- Python程序中的进程操作--—--开启多进程
Python程序中的进程操作-----开启多进程 之前我们已经了解了很多进程相关的理论知识,了解进程是什么应该不再困难了,刚刚我们已经了解了,运行中的程序就是一个进程.所有的进程都是通过它的父进程来创 ...
- 小白安装Android Studio
原文 Android Studio 安装 步骤1 - 系统要求 可以在以下的操作系统开始 Android 应用程序开发: Microsoft® Windows® 8/7/Vista/2003 (32 ...
- Android开发学习4
学习内容: 1.RecyclerView 2.WebView
- Nuxt.js学习(二) --- Nuxt目录结构详解、Nuxt常用配置项、Nuxt路由配置和参数传递
[TOC] 1.Nuxt目录结构详解 Nuxt项目文件目录结构 |-- .nuxt // Nuxt自动生成,临时的用于编辑的文件,build |-- assets // 用于组织未编译的静态资源入LE ...
- DataSet,DataTable排序(转载)
DataSet,DataTable排序 关于对已经绑定的DataSet的排序的问题: DataSet ds=new DataSet();DataView dv=new DataView();dv. ...
- RedBlack-Tree(红黑树)原理及C++代码实现
众所周知,红黑树是用途很广的平衡二叉搜索树,用过的都说好.所以我们来看看红黑树的是怎么实现的吧. 红黑树顾名思义,通过红与黑两种颜色来给每个节点上色.其中根结点和叶子结点一定是黑色的,并且红色结点的两 ...
- [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 ...
- 1)关于配置centos的网络问题
网址: http://jingyan.baidu.com/article/f3e34a12d886d2f5eb653515.html
- crm项目-需求分析
############### crm需求分析 ############### 讲师和学生:1,批量生成上课记录,2,考勤点名,3,录入成绩,4,显示成绩5,上传作业,os模块,6,下载成绩, ...