this是函数内部的一个特殊对象,它引用的是函数执行环境对象。也就是运行是基于函数的执行环境绑定。

1.在网页全局作用域中调用函数时,this引用window

var color='black';
function saycolor(){
console.log(this.color);
}
saycolor();//'black'

  第5行函数saycolor在全局作用域调用时this引用的是全局对象window,所以this.color的值就是window.color的值。

2.作为某个对象的方法被调用时,this等于该对象。

var o={
color:'white',
saycolor:function(){
console.log(this.color);
}};
o.saycolor();//'white'

  我们定义了一个新对象o,并为o添加了一个属性color和一个方法saycolor,第8行调用o对象的saycolor函数时,this引用的是对象o,所以this.color的值变成了o.color的值。

3.匿名函数的执行函数具有全局性,因此它的this通常指向window

var name='The Window';

var object={
name:'My Object', getName:function(){
return function(){
return this.name;
};
}
};
console.log(object.getName()());//'The Window'

  object.getName()返回的是一个函数,因此object.getName()()会立即调用它返回的函数。内部函数在搜索this变量时,只会搜索到其活动对象为止,所以不可能直接访问外部函数的this变量,也就是this不可能引用object对象。

4.把外部函数的this对象保存在闭包可访问到的变量中,在闭包中就可访问该对象了

var name='The Window';

var object={
name:'My Object', getName:function(){
var that=this;
return function(){
return that.name;
};
}
}; console.log(object.getName());//'My Object'

  在定义匿名函数之前,我们把this赋值给一个that变量,在定义闭包之后,闭包也可以访问这个变量,即使在函数返回之后,这个变量也引用着object对象,所以调用object.getnName()()返回'My Object'。

this是一个强大而又复杂的对象,我们一定要理解好它具体指代什么对象,接下来我们介绍两个方法call()和apply()。这两个方法的用途是在特定的作用域中调用函数,等于设置函数体内this对象的值。它们最强大的是能够扩大函数赖以运行的作用域。

call()与apply()只改变this对象的时候,只需要传入要引用的对象,此时它们作用相同,可以互用。它们扩充作用域的最大好处是方法与对象不需要任何耦合关系。

var color='black';
var o={color:'white'}; function saycolor(){
console.log(this.color);
}
saycolor(); //'black' saycolor.call(this);//'black'
saycolor.call(window);//'black'
saycolor.call(o);//'white'
saycolor.apply(this);//'black'

saycolor.apply(o);//'white'

  它们的区别是apply纯如的第二个参数是数组,call传入的第二组参数需要一个个列举出来。代码如下:

function sum(num1,num2){
return num1+num2;
} function applySum(num1,num2){
return sum.apply(this,arguments); /*参数第一个是在其中运行函数的作用域,第二个参数是数组 等价于 return sum.apply(this,[num1,num2]);*/
} function callSum(num1,num2){
return sum.call(this,num1,num2);/*参数第一个是在其中运行函数的作用域,后面一个个传参数*/
} console.log(applySum(10,10));//20
console.log(callSum(10,10));//20

  另外还有一个方法bind(),这个方法会创建一个函数实例,它的this值会被绑定到传给传给bind()函数的值

var color='black';
var o={color:'white'}; function saycolor(){
console.log(this.color);
}
var objsaycolor=saycolor.bind(o);
objsaycolor();//'white'

  saycolor调用bind()并传入对象o,创建了objsaycolor()函数,该函数的this值等于o,因此即使全局作用域中调用这个函数,也得到的是'white'。使用这个方法是根据是否需要object对象响应来决定的。

JavaScript中的this所引用的对象和如何改变这个引用的更多相关文章

  1. JavaScript中两种类型的全局对象/函数【转】

    Snandy Stop, thinking is the essence of progress. JavaScript中两种类型的全局对象/函数 这里所说的JavaScript指浏览器环境中的包括宿 ...

  2. JS对象 JavaScript 中的所有事物都是对象,如:字符串、数值、数组、函数等,每个对象带有属性和方法。

    什么是对象 JavaScript 中的所有事物都是对象,如:字符串.数值.数组.函数等,每个对象带有属性和方法. 对象的属性:反映该对象某些特定的性质的,如:字符串的长度.图像的长宽等: 对象的方法: ...

  3. JavaScript中的Function(函数)对象详解

    JavaScript中的Function对象是函数,函数的用途分为3类: 作为普通逻辑代码容器: 作为对象方法: 作为构造函数. 1.作为普通逻辑代码容器 function multiply(x, y ...

  4. JavaScript中两种类型的全局对象/函数

    这里所说的JavaScript指浏览器环境中的包括宿主环境在内的. 第一种是ECMAScript Global Object,第二种是宿主环境(Host)下的全局对象/函数. 一.核心JavaScri ...

  5. JavaScript中的Function(函数)对象

    1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4. ...

  6. javascript中字符串格式转化成json对象记录

    什么是JSON JSON(JavaScript Object Notation)是一种优美的JavaScript对象创建方法.JSON也是一种轻量级数据交换格式.JSON非常易于人阅读与编写,同时利于 ...

  7. JavaScript中Global、Math、Date对象的常用方法

    JavaScript当中Global.Math.Date类型常用方法如下: /* js 中 Global对象 是一个不存在的对象,它里面的方法可以调用 常用方法: 1 encodeURI 对uri进行 ...

  8. Javascript中判断变量是数组还是对象(array还是object)

    怎样判断一个JavaScript变量是array还是obiect? 答案: 1.如果你只是用typeof来检查该变量,不论是array还是object,都将返回‘objec'. 此问题的一个可行的答案 ...

  9. JavaScript中把Json字符串转化为对象

    1.采用eval()函数 定义和用法 eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码. 语法 eval(string) 参数 描述 string 必需.要计算的字符串, ...

随机推荐

  1. 第一周——数据分析之表示 —— Numpy 数据存取与函数

    数据的CSV文件的存取 CSV文件:CSV (Comma‐Separated Value, 逗号分隔值) CSV是一种常见的文件格式,用来存储批量数据 np.savetxt(frame, array, ...

  2. formData 对象 与 Content-Type 类型

    FormData FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据.其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用.如 ...

  3. 008_ssl Certificate Pinning

    证书锁定Certificate Pinning技术 在中间人攻击中,攻击主机通常截断客户端和服务器的加密通信.攻击机以自己的证书替代服务器发给客户端的证书.通常,客户端不会验证该证书,直接接受该证书, ...

  4. 七天开发进度(七)(微信小程序版(二)记账本)

    终于把小程序版弄完了,不过这并不能称之为是我的作品,因为我还没有彻底学会小程序,对JavaScript语言还有很多不会的地方,没有掌握, 这次的程序是通过学习网上的多个教程,多个案例结合拼凑模仿者人家 ...

  5. mac os app 开发

    macOS 新手开发:第 1 部分 macOS 新手开发:第 2 部分 macOS 新手开发:第 3 部分

  6. 爬虫-requests

    一.爬虫系列之第1章-requests模块 爬虫简介 概述 近年来,随着网络应用的逐渐扩展和深入,如何高效的获取网上数据成为了无数公司和个人的追求,在大数据时代,谁掌握了更多的数据,谁就可以获得更高的 ...

  7. Java Spring Boot VS .NetCore (九) Spring Security vs .NetCore Security

    Java Spring Boot VS .NetCore (一)来一个简单的 Hello World Java Spring Boot VS .NetCore (二)实现一个过滤器Filter Jav ...

  8. mysql触发器Before和After的区别

    Before与After区别:before:(insert.update)可以对new进行修改.                    after不能对new进行修改.                 ...

  9. Codeforces 522D Closest Equals

    题解: 傻逼题 直接从左向右扫描每个点作为右端点 然后单点修改区间查询就行了 另外一种更直观的做法就是$(i,j)$之间产生了$(j-i)$ 于是变成矩形查最大值,kd-tree维护 代码: #inc ...

  10. 为何学习matplotlib-【老鱼学matplotlib】

    这次老鱼开始学习matplotlib了. 在上个pandas最后一篇博文中,我们已经看到了用matplotlib进行绘图的功能,这次更加系统性地学习一下关于matplotlib的功能. matlab由 ...