JS JavaScript中的this
this是JavaScript语言中的一个关键字
它是函数运行时,在函数体内部自动生成的一个对象,只能在函数体内部使用。
function test() {
this.x = 1;
}
上面代码中,函数test运行时,内部会自动有一个this对象可以使用。
那么,this的值是什么呢?
函数在不同使用场合,this有不同的值。总之,this就是函数运行时所在的环境对象。
情况一:纯粹的函数调用
这是函数的最常通用法,属于全局性调用,因此this就代表全局对象。
var x = 1;
function test() {
console.log(this.x);
}
test(); //
情况二:作为对象的方法调用
函数还可以作为某个对象的方法调用,这时this就指这个上级对象
function test() {
console.log(this.x);
} var obj = {};
obj.x = 1;
obj.m = test; obj.m(); //
情况三:作为构造函数调用
构造函数就是通过这个函数可以生成一个新对象。这时,this就指这个新对象
function test() {
this.x = 1;
} var obj = new test();
obj.x //
为了表明这时this不是全局对象,下面代码:
var x = 2;
function test() {
this.x = 1;
} var obj = new test();
x //
运行结果为2,表明全局变量x的值没有变化
情况四:apply调用
apply()是函数的一个方法,作用是改变函数的调用对象。它的第一个参数就表示改变后的调用这个函数的对象。因此,这时this指的就是这个参数。
var x = 0;
function test() {
console.log(this.x);
} var obj = {};
obj.x = 1;
obj.m = test;
obj.m.apply() //
apply()的参数为空时,默认调用全局变量。因此,这时运行结果为0,证明this指的是全局对象。
如果把最后一行代码修改成
obj.m.apply(obj); //
运行结果就变成1,证明这时this代表的对象是obj
改变this的指向有以下几种方法
使用ES6的箭头函数
在函数内部_this=this
使用apply、call、bind
new实例化一个对象
其实this的指向,始终坚持一个原理:this永远指向最后调用它的那个对象。
几个例子:
例1:
var name = "windowsName";
function a() {
var name = "Cherry"; console.log(this.name); // windowsName console.log("inner:" + this); // inner: Window
}
a();
console.log("outer:" + this) // outer: Window
这里我们没有使用严格模式,如果使用严格模式的话,全局对象就是 undefined
,那么就会报错 Uncaught TypeError: Cannot read property 'name' of undefined
。
例2:
var name = "windowsName";
var a = {
name: "Cherry",
fn : function () {
console.log(this.name); // Cherry
}
}
a.fn();
例3:
var name = "windowsName";
var a = {
name: "Cherry",
fn : function () {
console.log(this.name); // Cherry
}
}
window.a.fn();
例4:
var name = "windowsName";
var a = {
// name: "Cherry",
fn : function () {
console.log(this.name); // undefined
}
}
window.a.fn();
例5:
var name = "windowsName";
var a = {
name : null,
// name: "Cherry",
fn : function () {
console.log(this.name); // windowsName
}
} var f = a.fn;
f();
为什么不是 Cherry
,这是因为虽然将 a 对象的 fn 方法赋值给变量 f 了,“this 永远指向最后调用它的那个对象”,由于刚刚的 f 并没有调用,所以 fn()
最后仍然是被 window 调用的。所以 this 指向的也就是 window。
例6:
var name = "windowsName"; function fn() {
var name = 'Cherry';
innerFunction();
function innerFunction() {
console.log(this.name); // windowsName
}
} fn()
JS JavaScript中的this的更多相关文章
- [js]javascript中4种异步
javascript中4种异步: 1.ajax 2.定时器 3.事件绑定 4,回调 定时器 //顺序执行 /* var s = 0; for (var i = 0; i < 10000; i++ ...
- js | javascript中获取dom元素的高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- js | JavaScript中数据类型转换总结
转载 在js中,数据类型转换分为显式数据类型转换和隐式数据类型转换. 1, 显式数据类型转换 a:转数字: 1)Number转换: 代码: var a = “123”; a = Number(a); ...
- JS JavaScript中的文档碎片 DocumentFragement JS性能优化
文档碎片是什么: 如果我们要在一个ul中添加100个li,如果不使用文档碎片,那么我们就需要使用append经常100次的追加,这会导致浏览器一直不停的渲染,是非常消耗资源的.但是如果我们使用文档碎片 ...
- JavaScript中解析JSON --- json.js 、 json2.js 以及 json3.js的使用区别
JSON官方(http://www.json.org/)提供了一个json.js,json.js是JSON官方提供的在JavaScript中解析JSON的js包,json.js.json2.js.js ...
- javascript中外部js文件取得自身完整路径得办法
原文:javascript中外部js文件取得自身完整路径得办法 有时候我们需要引入一个外部js文件,这个js文件又需要用到自己的路径或者是所在的目录,别问怎么又这么变态的需求,开发做久了各种奇葩需求也 ...
- js架构设计模式——理解javascript中的MVVM开发模式
理解javascript中的MVVM开发模式 http://blog.csdn.net/slalx/article/details/7856769 MVVM的全称是Model View ViewMod ...
- JSON(二)——JavaScript中js对象与JSON格式字符串的相互转换
首先我们来看一下js中JSON格式的字符串 var JSONStr1 = "{\"name\" : \"张三\"}"; 注意以下的写法不是j ...
- JavaScript进阶(二)在一个JS文件中引用另一个JS文件
在一个JS文件中引用另一个JS文件 转载地址:http://blog.csdn.net/zndxlxm/article/details/7875787 方法一 在调用文件的顶部加入下例代码 ...
随机推荐
- jgrid 选择器 C#控件
一.RadioButtonList html代码: <asp:RadioButtonList ID="rlPlan" runat="server" Rep ...
- 循环结构 while
while 循环语句可以根据某些条件重复执行一条t-sql 语句或一个语句块 语法: while (条件) begin 语句或语句块 end 程序调试 alt+f5 启动调试 f9 切换断点 f10 ...
- 人民币金额大小写Js转换
/** * 数字转中文 * @param dValue * @returns */ function chineseNumber(dValue) { var maxDec = 2; // 验证输入金额 ...
- python发送邮件(带附件)
python通过stmp发送qq邮件,带附件 import smtplib from email.mime.multipart import MIMEMultipart from email.mime ...
- hibernate的查询 (比较get 与load)
hibernate的查询的比较hibernate的查询有很多,Query,find,Criteria,get,load query使用hsql语句,可以设置参数是常用的一种方式 criteria的方式 ...
- 16_AOP入门准备_Jdk动态代理模式
[工程截图] [PersonDao.java] package com.HigginCui.daoProxy; //目标类接口 public interface PersonDao { public ...
- jmeter简单录制
JMeter介绍 1.JMeter,一个100%的纯Java桌面应用,它是Apache组织的开放源代码项目,它是功能和性能测试的工具.JMeter可以用于测试静态或者动态资源的性能(文件.Servle ...
- 好记性不如烂笔头-nginx安装环境与Linux安装ftp组件
Nginx安装环境 1. Nginx安装环境 Nginx是C语言开发,建议在linux上运行,我参加工作这些年来一直使用Linux发行版之一的 Centos作为安装环境. 1.1 gcc 安装Ngin ...
- 【Spring实战】—— 11 通过AOP为特定的类引入新的功能
如果有这样一个需求,为一个已知的API添加一个新的功能. 由于是已知的API,我们不能修改其类,只能通过外部包装.但是如果通过之前的AOP前置或后置通知,又不太合理,最简单的办法就是实现某个我们自定义 ...
- oracle模糊搜索避免使用like,替换为instr()
oracle中instr()函数用法 instr(name,'张三')>0 相当于 name like '%张三%' instr(name,'张三')=1 相当于 name like ' ...