JavaScript中的this所引用的对象和如何改变这个引用
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所引用的对象和如何改变这个引用的更多相关文章
- JavaScript中两种类型的全局对象/函数【转】
Snandy Stop, thinking is the essence of progress. JavaScript中两种类型的全局对象/函数 这里所说的JavaScript指浏览器环境中的包括宿 ...
- JS对象 JavaScript 中的所有事物都是对象,如:字符串、数值、数组、函数等,每个对象带有属性和方法。
什么是对象 JavaScript 中的所有事物都是对象,如:字符串.数值.数组.函数等,每个对象带有属性和方法. 对象的属性:反映该对象某些特定的性质的,如:字符串的长度.图像的长宽等: 对象的方法: ...
- JavaScript中的Function(函数)对象详解
JavaScript中的Function对象是函数,函数的用途分为3类: 作为普通逻辑代码容器: 作为对象方法: 作为构造函数. 1.作为普通逻辑代码容器 function multiply(x, y ...
- JavaScript中两种类型的全局对象/函数
这里所说的JavaScript指浏览器环境中的包括宿主环境在内的. 第一种是ECMAScript Global Object,第二种是宿主环境(Host)下的全局对象/函数. 一.核心JavaScri ...
- JavaScript中的Function(函数)对象
1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4. ...
- javascript中字符串格式转化成json对象记录
什么是JSON JSON(JavaScript Object Notation)是一种优美的JavaScript对象创建方法.JSON也是一种轻量级数据交换格式.JSON非常易于人阅读与编写,同时利于 ...
- JavaScript中Global、Math、Date对象的常用方法
JavaScript当中Global.Math.Date类型常用方法如下: /* js 中 Global对象 是一个不存在的对象,它里面的方法可以调用 常用方法: 1 encodeURI 对uri进行 ...
- Javascript中判断变量是数组还是对象(array还是object)
怎样判断一个JavaScript变量是array还是obiect? 答案: 1.如果你只是用typeof来检查该变量,不论是array还是object,都将返回‘objec'. 此问题的一个可行的答案 ...
- JavaScript中把Json字符串转化为对象
1.采用eval()函数 定义和用法 eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码. 语法 eval(string) 参数 描述 string 必需.要计算的字符串, ...
随机推荐
- 第一周——数据分析之表示 —— Numpy 数据存取与函数
数据的CSV文件的存取 CSV文件:CSV (Comma‐Separated Value, 逗号分隔值) CSV是一种常见的文件格式,用来存储批量数据 np.savetxt(frame, array, ...
- formData 对象 与 Content-Type 类型
FormData FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据.其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用.如 ...
- 008_ssl Certificate Pinning
证书锁定Certificate Pinning技术 在中间人攻击中,攻击主机通常截断客户端和服务器的加密通信.攻击机以自己的证书替代服务器发给客户端的证书.通常,客户端不会验证该证书,直接接受该证书, ...
- 七天开发进度(七)(微信小程序版(二)记账本)
终于把小程序版弄完了,不过这并不能称之为是我的作品,因为我还没有彻底学会小程序,对JavaScript语言还有很多不会的地方,没有掌握, 这次的程序是通过学习网上的多个教程,多个案例结合拼凑模仿者人家 ...
- mac os app 开发
macOS 新手开发:第 1 部分 macOS 新手开发:第 2 部分 macOS 新手开发:第 3 部分
- 爬虫-requests
一.爬虫系列之第1章-requests模块 爬虫简介 概述 近年来,随着网络应用的逐渐扩展和深入,如何高效的获取网上数据成为了无数公司和个人的追求,在大数据时代,谁掌握了更多的数据,谁就可以获得更高的 ...
- Java Spring Boot VS .NetCore (九) Spring Security vs .NetCore Security
Java Spring Boot VS .NetCore (一)来一个简单的 Hello World Java Spring Boot VS .NetCore (二)实现一个过滤器Filter Jav ...
- mysql触发器Before和After的区别
Before与After区别:before:(insert.update)可以对new进行修改. after不能对new进行修改. ...
- Codeforces 522D Closest Equals
题解: 傻逼题 直接从左向右扫描每个点作为右端点 然后单点修改区间查询就行了 另外一种更直观的做法就是$(i,j)$之间产生了$(j-i)$ 于是变成矩形查最大值,kd-tree维护 代码: #inc ...
- 为何学习matplotlib-【老鱼学matplotlib】
这次老鱼开始学习matplotlib了. 在上个pandas最后一篇博文中,我们已经看到了用matplotlib进行绘图的功能,这次更加系统性地学习一下关于matplotlib的功能. matlab由 ...