1.JS设计模式-this,call&apply
1. this,call&apply
1.1 this
this是Javascript语言的一个关键字。
它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。
1.1.1 普通函数调用
这是函数的最通常用法,属于全局性调用,因此this就代表全局对象Global。
请看下面这段代码,它的运行结果是1。
function test(){
this.x = 1;
alert(this.x);
}
test(); // 1
为了证明this就是全局对象
1.1.2 对象方法的调用
函数还可以作为某个对象的方法调用,这时this就指这个上级对象。
function test(){
alert(this.x);
}
var o = {};
o.x = 1;
o.m = test;
o.m(); // 1
1.1.3 构造函数调用
所谓构造函数,就是通过这个函数生成一个新对象(object)。这时,this就指这个新对象。
function test(){
this.x = 1;
}
var o = new test();
alert(o.x); // 1
运行结果为1。
1.1.4 apply调用
apply()是函数对象的一个方法,它的作用是改变函数的调用对象,它的第一个参数就表示改变后的调用这个函数的对象。因此,this指的就是这第一个参数。
var x = 0;
function test(){
alert(this.x);
}
var o={};
o.x = 1;
o.m = test;
o.m.apply(); //0
apply()的参数为空时,默认调用全局对象。因此,这时的运行结果为0,证明this指的是全局对象。
如果把最后一行代码修改为
o.m.apply(o); //1
运行结果就变成了1,证明了这时this代表的是对象o。
1.2 call &apply
apply() 方法在指定 this 值和参数(参数以数组或类数组对象的形式存在)的情况下调用某个函数。
fun.apply(thisArg[, argsArray])
call() 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法.
fun.call(thisArg[, arg1[, arg2[, ...]]])
1.2.1 改变对象的this指向
function Obj(){this.value="对象!";}
var value="global 变量";
function Fun1(){alert(this.value);}
window.Fun1(); //global 变量
Fun1.call(window); //global 变量
Fun1.call(document.getElementById('myText')); //input text
Fun1.call(new Obj()); //对象!
call函数和apply方法的第一个参数都是要传入给当前对象的对象,及函数内部的this。
1.2.2 借用方法
var numbers = [5, 458 , 120 , -215 ];
var maxInNumbers = Math.max.apply(Math, numbers), //458
maxInNumbers = Math.max.call(Math,5, 458 , 120 , -215); //458
number 本身没有 max 方法,但是 Math 有,我们就可以借助 call 或者 apply 使用其方法
1.2.3 bind
bind()方法会创建一个新函数,称为绑定函数,当调用这个绑定函数时,绑定函数会以创建它时传入 bind()方法的第一个参数作为 this,传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。
fun.bind(thisArg[, arg1[, arg2[, ...]]])
调用,希望方法中的 this 是原来的对象。(比如在回调中传入这个方法。)如果不做特殊处理的话,一般会丢失原来的对象。从原来的函数和原来的对象创建一个绑定函数,则能很漂亮地解决这个问题:
this.x = 9;
var module = {
x: 81,
getX: function() { return this.x; }
};
module.getX(); // 81
var getX = module.getX;
getX(); // 9, 因为在这个例子中,"this"指向全局对象
// 创建一个'this'绑定到module的函数
var boundGetX = getX.bind(module);
boundGetX(); // 81
自己实现bind函数:
Function.prototype.bind = function(context){
var args = Array.prototype.slice(arguments, 1),
F = function(){},
self = this,
bound = function(){
var innerArgs = Array.prototype.slice.call(arguments);
var finalArgs = args.concat(innerArgs);
return self.apply((this instanceof F ? this : context), finalArgs);
};
F.prototype = self.prototype;
bound.prototype = new F();
return bound;
};
1.JS设计模式-this,call&apply的更多相关文章
- JS设计模式(一)
刚入职时,看过一段时间的设计模式,似懂非懂.不知不觉过去七个月了,对JS的理解更深刻了,数据结构与算法的基础也基本上算是过了一遍了,接下来要把设计模式搞定,然后不再深层次研究JS了,而是学习前端自动化 ...
- js继承之call,apply和prototype随谈
在js中,call,apply和prototype都可以实现对象的继承,下面我们看一个例子: function FatherObj1() { this.sayhello = "I am jo ...
- js设计模式(12)---职责链模式
0.前言 老实讲,看设计模式真得很痛苦,一则阅读过的代码太少:二则从来或者从没意识到使用过这些东西.所以我采用了看书(<js设计模式>)和阅读博客(大叔.alloyteam.聂微东)相结合 ...
- JS设计模式——5.单体模式
JS设计模式——5.单体模式 http://www.cnblogs.com/JChen666/p/3610585.html 单体模式的优势 用了这么久的单体模式,竟全然不知!用它具体有哪些好处呢? ...
- js 设计模式-接口
js模拟java接口检测函数:确保子类实现接口中的方法:(出自js设计模式) 上代码: <script type="text/javascript" > <%-- ...
- 前端笔记之JavaScript面向对象(三)初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发
一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach() ...
- [js]js设计模式小结
js设计模式小结 工厂模式/构造函数--减少重复 - 创建对象有new - 自动创建obj,this赋值 - 无return 原型链模式 - 进一步去重 类是函数数据类型,每个函数都有prototyp ...
- [js]设计模式小结&对原型的修改
js设计模式小结 工厂模式/构造函数--减少重复 - 创建对象有new - 自动创建obj,this赋值 - 无return 原型链模式 - 进一步去重 类是函数数据类型,每个函数都有prototyp ...
- js设计模式总结1
js设计模式有很多种,知道不代表会用,更不代表理解,为了更好的理解每个设计模式,对每个设计模式进行总结,以后只要看到总结,就能知道该设计模式的作用,以及模式存在的优缺点,使用范围. 本文主要参考张容铭 ...
随机推荐
- HTML Agility Pack 搭配 ScrapySharp,彻底解除Html解析的痛苦
var divs = html.CssSelect("div"); //all div elementsvar nodes = html.CssSelect("div. ...
- 如何才能实现在点击链接时直接在网页中打开word文档,但不提示保存
一般要直接打开需要客户端 1.客户端有word支持 2.客户端浏览器的版本与设置 可寻找一下相关的控件或中间件,我的意见是看能否变通一下,把word转成HTML或PDF再展示给用户.(若用户不需要编辑 ...
- vs2010 中无法打开 源文件 "stdafx.h" 未定义标识符 “xxx”
解决方案: 项目属性->配置属性->C/C++->常规->附加包含目录->$(ProjectDir)
- 电脑网线/水晶头的连接方法(A类,B类)
一般的橙白,橙,绿白,蓝,蓝白,绿,棕白,棕. 若是只有四根线的,则任选四根,做线时对应水晶头的1\2\3\6四个入口压制即可. 如果只有一根网线,但想两台机子同时上网,不增加外设,做网线时45水晶头 ...
- 微信小程序开放公测了 晚上又可以通宵搞代码了
就在刚刚22:15分,微信公众平台的服务号发来好消息说小程序开放公测了,喜大普奔啊!!!码农们晚上又可以通宵搞测试了.之前还猜测16日微信小论坛小程序专场上会公布,没想到提前了那么多天,效率挺高的,而 ...
- hdu.1111.Secret Code(dfs + 秦九韶算法)
Secret Code Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Tota ...
- webrtc第二篇 聊天室
聊天室模型不一样考虑的问题也不一样 1.websocket文本聊天 * step1 : 向聊天室所有用户(不包括该用户自己)发送当前用户上线信息.客户端用户栏回添加此用户 * step2 : 将该用户 ...
- maven工程通过命令打包
dos下cd到pom.xml所在的目录,输入maven命令:mvn clean package,回车即可. 会打成一个.war包在target文件夹下.
- 使用 Github Pages 发布你的项目文档
导读 你可能比较熟悉如何用 Github Pages 来分享你的工作,又或许你看过一堂教你建立你的第一个 Github Pages 网站的教程.近期 Github Pages 的改进使得从不同的数据源 ...
- Understand:高效代码静态分析神器详解(转)
之前用Windows系统,一直用source insight查看代码非常方便,但是年前换到mac下面,虽说很多东西都方便了,但是却没有了静态代码分析工具,很幸运,前段时间找到一款比source ins ...