JS this指向

感谢thinker_creator,文章来源:http://blog.163.com/thinker_creator/blog/static/1019331492009101545251234/

JS中, this的值取决于调用的模式, 而JS中共有4中调用模式:

1. 方法调用模式

当一个函数被保存为对象的一个属性时, 我们称它为一个方法, 当一个方法被调用时, this指向该对象, 如:

var obj = {
value: 1,
getValue: function() {
alert(this.value);
}
};
obj.getValue(); // 输出1, 此时的this指向obj

注意: 该模式中, this到对象的绑定发生在方法被调用的时候.

2. 函数调用模式

当一个函数并非一个对象的属性时, 它被当作一个函数来调用, 此时的this指向全局对象(window), 如:

window.value = 1;
function getValue() { alert(this.value); }
getValue(); // 输出1, 此时的this指向window.

 

3. 构造器调用模式

结合new前缀调用的函数被称为构造器函数, 此时的this指向该构造器函数的实例对象, 如:

function show(val) {
this.value = val;
};
show.prototype.getVal = function() {
alert(this.value);
};
var func = new show(1);
func.getVal(); // 输出1
alert(func.value) // 输出1
// 从上面的结果, 可以看出, 此时的this指向了func对象.

4. apply/call调用模式

apply和call方法可以让我们设定调用者中的this指向谁, 如:

var fun = function(str) {
this.status = str;
}
fun.prototype.getStatus = function() {
alert(this.status);
}
var obj = {
status: "loading"
};
fun.prototype.getStatus.apply(obj); // 输出"loading", 此时getStatus方法中的this指向了obj
时间: 2024-08-05 10:50:09

JS this指向的相关文章

js this指向分析

一.普通函数 1.this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁: 实际上this的最终指向的是那个调用它的对象 1 1) function a() { 2 var name = 'xiaoming' 3 console.log(this) // window 4 console.log(this.name) // undefined 5 } 6 7 window.a() 8 9 2) var b = { 10 name: 'xiaoming', 11

JS this指向问题

1 <button onclick=(function(){alert(this)})()>I'm button</button>//this指代window 2 <button onclick=(function(){alert(this)}).call(this)>I'm button,too</button>//通过call使this指向当前按钮元素 3 一个例子 4 <button onclick=(function(){this.innerH

js this 指向(es5)和es6箭头函数this指向问题总结(邹文丰版)

本文纯属自己结合网上文章总结,有问题和不同想法欢迎留言指正/********************简单小例子********************/ var test =function () { console.log(this); }; // test(); //window/*****************************2***********************************/ var test2 =function () { console.log(thi

可能是史上最强大的js图表库——ECharts带你入门

PS:之前的那篇博客Highcharts——让你的网页上图表画的飞起 ,评论中,花儿笑弯了腰 和 StanZhai 两位仁兄让我试试 ECharts ,去主页看到<Why ECharts ?>简单了解了一下之后,ECharts很快吸引了我.里面引自马云的那句话“互联网还没有搞清楚的时候,移动互联网来了,移动互联没有搞清楚的时候,大数据来了”我是第一次听到,实在震撼了我啊(孤陋寡闻...). 本来没打算写什么的.可是作为一个后端开发者,看了半天文档也迷迷糊糊,查了一堆资料也没搞懂Echarts那

日历js插件

因为做了一个培训管理模块,要有一个开始与结束培训时间.时间日期如果个用户手动输入的话,即使你要求了时间格式,但是用户可能还是会输错时间格式.所以想想,还是找了一个js日历插件.下面来介绍下我自己用的一点经验吧. 第一步.先下载下来吧.地址:http://www.my97.net/dp/down/My97DatePickerBeta.zip 下载下来你会看到一个示范页面和一个js文件夹.在示范页面中,讲解还是很清楚的,这个非常感谢前人啊.从页面介绍中不难发现该日历插件一直在更新,修正一些bug,也

史上最强大的js图表库——ECharts带你入门(转)

出处:http://www.cnblogs.com/zrtqsk/p/4019412.html PS:之前的那篇博客Highcharts——让你的网页上图表画的飞起 ,评论中,花儿笑弯了腰 和 StanZhai 两位仁兄让我试试 ECharts ,去主页看到<Why ECharts ?>简单了解了一下之后,ECharts很快吸引了我.里面引自马云的那句话“互联网还没有搞清楚的时候,移动互联网来了,移动互联没有搞清楚的时候,大数据来了”我是第一次听到,实在震撼了我啊(孤陋寡闻...). 本来没打

前端多个变量指向同一个对象的问题

环境:ReactJs 描述:在state里面有2个对象:a=[1,2,3,4]; b=[1,2,3,4].[其中,数字1,2,3,4均表示一个对象] 然后更改b=[1,2],a没动.结果发现a也变成了a=[1,2]. 分析:原因是Js变量指向同一块内存,你在改变数组的时候,要把它深拷贝过来. 可用的解决办法是:a= JSON.stringify([1,2,3,4]),这样就没问题了.用的时候JSON.parse(a)解析. 或者另外一种类似的情况:a={"id": 1, "t

对象上的__proto__ 指向

一.不同对象下的__proto__(注:以下讨论是在不干涉__proto__ 和 prototype在原生Js中指向的情况下进行的) 1. 构造函数中有 __proto__ 和 prototype. __proto__ (1)被构造出对象的 __proto__ 指向 对应 构造函数的 prototype (2)原型对象prototype 的 __proto__   指向 Object.prototype 2. 实例化对象中有 __proto__ 实例化对象中的 __proto__ 指向 对应构造

arcgis webapp builder 安装试用

ArcGIS WebApp Builder 是针对开发者的,用于高速构建基于HTML5/Javascript 技术的美观的 Web应用的一个工具. 用过Flex版本号的AppBuilder应该非常清楚它的特点:高速.高效.灵活.美观.GIS开发者的利器. 下面是截图 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZXNyaWNoaW5hY2Q=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/