熟练掌握js中this的用法,解析this在不同应用场景的作用
function makeNoSense(x) {
this.x = x;
}
makeNoSense();
console.log(x);// x 已经成为一个值为 5 的全局变量
function test(){
this.x = ;
alert(this.x);
}
test(); //
情况二:作为对象方法的调用
函数还可以作为某个对象的方法调用,这时this指代对象内部属性被调用。
var myObject = {
value :,
increment:function (inc){
this.value += typeof inc ==='number' ? inc:;
}
};
myObject.increment();
console.log(myObject.value); //
myObject.increment();
console.log(myObject.value); //
情况三 :作为构造函数调用
function Point(x, y){
this.x = x;
this.y = y;
}
var p1 = new Point(,);
console.log(p1.x+","+p1.y);//3,2
为了表明这时this不是全局对象,我对代码做一些改变:
var x = ;
function Point(x, y){
this.x = x;
this.y = y;
}
var p1 = new Point(,);
console.log(p1.x+","+p1.y);//3,2
情况四: apply或call调用
function Point(x, y){
this.x = x;
this.y = y;
this.moveTo = function(x, y){
this.x = x;
this.y = y;
console.log(this.x+","+this.y);
}
}
var p1 = new Point(, );
var p2 = {x: , y: };
p1.moveTo(, ); //1,1
p1.moveTo.apply(p2, [, ]);//10,10
在上面的例子中,我们使用构造函数生成了一个对象 p1,该对象同时具有 moveTo 方法;使用对象字面量创建了另一个对象 p2,我们看到使用 apply 可以将 p1 的方法应用到 p2 上,这时候 this 也被绑定到对象 p2 上。另一个方法 call 也具备同样功能,不同的是最后的参数不是作为一个数组统一传入,而是分开传入的。本文通过对JavaScript中经常容易混淆的this在四中应用场景中的使用方法进行了讲解,希望对您有所帮助,喜欢的话,请推荐一下哦。
熟练掌握js中this的用法,解析this在不同应用场景的作用的更多相关文章
- [转载]js中return的用法
一.返回控制与函数结果,语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 二.返回控制,无函数结果,语法为:return; 在大多数情况下,为事件处理函 ...
- js中this的用法
经过近几周的模拟面试题,我查询了一些资料,今天就来说说,在js中this的用法吧.方法有四:第一,用作全局变量,第二,用作表该对象,第三,用作构造函数,第四,用作call和applay
- [JavaScript] JS中对Base64的解析
JS中对Base64的解析 <script type="text/javascript"> /** * UTF16和UTF8转换对照表 * U+00000000 – U ...
- JQuery之append和appendTo的区别,还有js中的appendChild用法
JQuery之append和appendTo的区别 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择的 ...
- JS中event.keyCode用法及keyCode对…
js中event.keyCode用法及keyCode对照表 标签: javascriptJavaScriptJavascriptjavaScript 2012-12-11 15:11 HTML Jav ...
- 浅谈JS中 reduce() 的用法
过去有很长一段时间,我一直很难理解 reduce() 这个方法的具体用法,平时也很少用到它.事实上,如果你能真正了解它的话,其实在很多地方我们都可以用得上,那么今天我们就来简单聊聊JS中 reduce ...
- JS中 reduce() 的用法
过去有很长一段时间,我一直很难理解 reduce() 这个方法的具体用法,平时也很少用到它.事实上,如果你能真正了解它的话,其实在很多地方我们都可以用得上,那么今天我们就来简单聊聊JS中 reduce ...
- MATLAB中冒号的用法解析
MATLAB中冒号的用法解析 1.: 表示所有的意思. (1)如:a(1,:) 表示a的第1行,示例: 结果: 同样的如果a(2,:)表示a的第2行 (2)反过来,a(:,2) 表示a的第3列,示例: ...
- JS中的this用法详解
随着对js的深入学习和使用,你会发现它里面包含了很多令人困惑的机制,比如对象.闭包.原型链继承等等,而这其中肯定包含令你现在或者曾经费解的this,如果你不把心一横,花点时间还真不明白这个this的用 ...
随机推荐
- SignalR入门之多平台SignalR服务端
之前创建SignalR服务端是基于Web应用程序而言的.那么能不能把SignalR服务端做成控制台应用程序.Winform或windows服务呢? 答案是肯定的. 之前尽管看起来好像是IIS和ASP. ...
- C#~异步编程在项目中的使用
一些闲话 对异步编程没有了解的同学可以看我的这篇文章<C#~异步编程>,今天主要说一下,在项目中怎么就用到了异步编程!在进行WEB开发时,异步这块我们用的并不多,但当你的项目做到一定规模时 ...
- 背水一战 Windows 10 (7) - 控件 UI: VisualState, VisualStateManager, 控件的默认 UI
[源码下载] 背水一战 Windows 10 (7) - 控件 UI: VisualState, VisualStateManager, 控件的默认 UI 作者:webabcd 介绍背水一战 Wind ...
- Wijmo 2016 V1 强势发布,全面支持Angular 2
Wijmo UI控件支持Angular 2 从Angular的1.x时代开始,Wijmo就已经支持Angular了.最近,我们正在和Angular团队合作来支持Angular 2.有趣的是,对Angu ...
- MySQL Cursor
MySQL Cursor Summary: in this tutorial, you will learn how to use MySQL cursor in stored procedures ...
- 开始自学H5前端-第一天
自从iOS工作丢了后 就萌生了自学这个想法 但是一直在纠结学哪一门语言好 我是计算机科学与技术专业的 其实对于我来说 学啥都算是有点基础的 但是被iOS坑惨了之后 就会不自觉的进行各个方向和前景分析 ...
- 通过“回文字算法”复习C++语言。
一.什么是回文字 给定一个字符串,从前往后读和从后往前读,字符串序列不变.例如,河北省农村信用社的客服电话是“96369”,无论从后往前读,还是从前后往后读,各个字符出现的位置不变. 二.功能实现 ( ...
- php高版本不再使用mysql_connect()来连接数据库
想用php生成一个mysql数据字典导出来,用到下面代码会 $mysql_conn = mysql_connect ( "$dbserver", "$dbusername ...
- MAC 卸载 mysql
怎样才能完全卸载mysql和删除它从你的Mac(包括所有数据库)执行以下操作: 打开终端窗口 使用mysqldump备份你的数据库将文本文件! 停止数据库服务器 sudo rm /usr/local/ ...
- java集合-HashMap
HashMap基于哈希表的 Map 接口的实现,以 key-value 的形式存在.在 HashMap 中,key-value 总是会当做一个整体来处理,系统会根据 hash 算法来来计算 key-v ...