js中的call()方法与apply()方法
摘自:http://blog.csdn.net/chelen_jak/article/details/21021101
在web前端开发过程中,我们经常需要改变this指向,通常我们想到的就是用call方法
一、call方法的定义
关于call的定义都很拗口。在我的理解,a.call(b,arg1,arg2..)就是a对象的方法应用到b对象上。例如如下例子:
function add(a,b)
{
alert(a+b);
}
function reduce(a,b)
{
alert(a-b);
}
add.call(reduce,1,3) //将add方法运用到reduce,结果为4
二、call可以改变this指向
如下例:
function b()
{
alert(this)
}
b(); //window
b.call(); //window
b.call(“a”,2,3); //a
再看一个复杂的例子:
function Animal()
{
this.name=”animal”;
this.showName=function()
{
alert(this.name)
}
}
function Cat()
{
this.name=”cat”;
}
var animal = new Animal();
var cat = new Cat();
animal.showName(); //结果为animal
animal.showName.call(cat); //原本cat没有showName方法,但是通过call方法将animal的showName方法应用到cat上,因此结果为cat
三、实现继承
如下例子:
function Animal(name)
{
this.name=name;
this.showName=function()
{
alert(this.name)
}
}
function Cat(name)
{
Animal.call(this,name); //将Animal应用到Cat上,因此Cat拥有了Animal的所有属性和方法
}
var cat = new Cat(“Black Cat”);
cat.showName(); //浏览器弹出Black Cat
四、apply用法
apply和call的用法只有一个地方不一样,除此之外,其他地方基本一模一样
a.call(b,arg1,arg2…)
apply(b,[arg1,arg2]) //apply只有2个参数,它将call的参数(arg1,arg2…)放在一个数组中作为apply的第二参数
其他总结:
call方法:
语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]])
定义:调用一个对象的一个方法,以另一个对象替换当前对象。
说明:
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。
apply方法:
语法:apply([thisObj[,argArray]])
定义:应用某一对象的一个方法,用另一个对象替换当前对象。
说明:
如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。
代码示例:
function Animal(name) {
this.name = name;
this.showName = function() {
console.log(this.name);
};
} function Cat(name) {
Animal.call(this, name);
}
Cat.prototype = new Animal(); //prototype 属性使您有能力向对象添加属性和方法。 function Dog(name) {
Animal.apply(this, name);
}
Dog.prototype = new Animal(); var cat = new Cat("Black Cat"); //call必须是object var dog = new Dog(["Black Dog"]); //apply必须是array cat.showName();
dog.showName(); console.log(cat instanceof Animal);
console.log(dog instanceof Animal);
js中的call()方法与apply()方法的更多相关文章
- JS中的call()方法和apply()方法用法总结
原文引自:https://blog.csdn.net/ganyingxie123456/article/details/70855586 最近又遇到了JacvaScript中的call()方法和app ...
- JS中的call()方法和apply()方法用法总结(挺好 转载下)
最近又遇到了JacvaScript中的call()方法和apply()方法,而在某些时候这两个方法还确实是十分重要的,那么就让我总结这两个方法的使用和区别吧. 1. 每个函数都包含两个非继承而来的方法 ...
- js中得call()方法和apply()方法的用法
方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call 方 ...
- js中bind,call,apply方法的应用
最近用js的类写东西,发现一个无比蛋疼的事,那就是封装的类方法中的this指针经常会改变指向,失去上下文,导致程序错误或崩溃. 比如: function Obj(){ this.type = &quo ...
- [转] JS中的call()方法和apply()方法用法总结
//例1 <script> window.color = 'red'; document.color = 'yellow'; var s1 = {color: 'blue' }; func ...
- js中判断数据类型的四种方法总结
js中判断数据类型的四种方法 前言 在js中,我们经常需要判断数据的类型,那么哪些方法可以用来判断数据的类型呢?哪种方法判断数据类型最准确呢? 我们来一个个分析: 1.typeof typeof是一个 ...
- js中style.display=""无效的解决方法
本文实例讲述了js中style.display=""无效的解决方法.分享给大家供大家参考.具体解决方法如下: 一.问题描述: 在js中我们有时想动态的控制一个div显示或隐藏或更多 ...
- js中数组去重的几种方法
js中数组去重的几种方法 1.遍历数组,一一比较,比较到相同的就删除后面的 function unique(arr){ ...
- JS 中深拷贝的几种实现方法
JS 中深拷贝的几种实现方法1.使用递归的方式实现深拷贝 //使用递归的方式实现数组.对象的深拷贝 function deepClone1(obj) { //判断拷贝的要进行深拷贝的是数组还是对象,是 ...
- js中的splice方法和slice方法简单总结
slice:是截取用的 splice:是做删除 插入 替换用的 slice(start,end): 参数: start:开始位置的索引 end:结束位置的索引(但不包含该索引位置的元素) 例如: va ...
随机推荐
- 判断是否AVL平衡二叉书
#include<iostream> #include<vector> #include<stack> #include<string> #includ ...
- [C#]使用Label标签控件模拟窗体标题的移动
本文为原创文章.源代码为原创代码,如转载/复制,请在网页/代码处明显位置标明原文名称.作者及网址,谢谢! 开发工具:VS2017 语言:C# DotNet版本:.Net FrameWork 4.0及以 ...
- mysql 索引类型
根据类型分为普通索引2种类型,hash 和b-tree 最常用 hash是按一对一索引的.速度 最快但不支持范围 比如where name = 'dd' 最快.但是使用 date >3 ...
- Linux学习之在搭建java开发环境
首先,在官网上下载你需要的JDK 然后 解压包 tar -zxvf 包名 配置环境变量 vim /etc/profile 如果权限不够,就使用sudo vim /etc/profile 在profi ...
- Maven项目pom.xml文件报xxx\target\classes\META-INF\MANIFEST.MF (系统找不到指定的路径)
在今天的学习Maven项目中遇到的这个错误:pom.xml文件报xxx\target\classes\META-INF\MANIFEST.MF (系统找不到指定的路径) 在Maven项目学习中,缓存问 ...
- js 消抖(debounce)与节流(throttle)
前言 故事发生在与大创的又一次撕逼(日常)中,我方坚定的认为:作为社会主义接班人,节流与消抖的界限是明显的,是不容混肴的,是不可侵犯的!对方辩友坚持地觉得:界限是模糊的,行为是暧昧的,性别是可以忽视的 ...
- java 后台代码调用接口
import com.jiuqu.jollykeys.common.util.JsonUtil;import java.io.UnsupportedEncodingException;import j ...
- Python2/3中的urllib库
urllib库对照速查表 Python2.X Python3.X urllib urllib.request, urllib.error, urllib.parse urllib2 urllib.re ...
- SFTP工具类 操作服务器
package com.leadbank.oprPlatform.util;import com.jcraft.jsch.*;import com.jcraft.jsch.ChannelSftp.Ls ...
- FiddlerCoreAPI开发(一)源码分析
1.前言 前一段时间想利用fiddlercore截取本地HTTPS的流量做一些分析,按照样例代码的注释学习了一下,没搞清楚怎么实现,后来又在网上查了些资料,对HTTPS的处理提及很少,都没有解决我的问 ...