JS的this总结(上)-call()和apply()
JS的this总结(上)-call()和apply()
相信很多人在学习JavaScript的过程中,都会了解到this,而大部分人都会特意去网络上搜一下相关资料,大部分的文章都有这么一句话:
this总是指向调用该函数的对象。
确实,这句话在我学习JS的过程中,基本没出现过什么错误.
但是注意的是JS中,平时用得相对比较少的2个方法,可以改变this的指向:
call(thisArg[, arg1[, arg2[, ...]]])
首先call(),引用segmentfault中的一个问题:[关于call()方法中的this]
function Animal(name) {
this.name = name;
this.showName = function () {
alert(this.name);
}
}
function Cat(name) {
Animal.call(this, name);
// 执行Animal方法,并传入name作为参数
}
var cat = new Cat("Black Cat");
cat.showName();//Black Cat
大概过程如下,我们在new一个实例的时候,this的指向改变了,指向了Cat实例对象(同时我们也尝试可以不用new,我们会发现this指向Window(严格模式下指向的是undefined)),然后Animal.call(this, name) 中的this,指向的也是Cat实例对象本身,这个时候就相当于
cat.name = name;
cat.showName = function () {
alert(cat.name);
}
结果相当于,我们用call()让Cat的实例对象cat,传入name('Black Cat')参数,并且临时执行了Animal中的方法
从网上搜来的call()的资料如下,可以参考一下,推荐看MDN文档关于call()介绍--Function.prototype.call()
call方法:
语法:call(thisObj,Object)
定义:调用一个对象的一个方法,以另一个对象替换当前对象。
说明:
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。
apply(thisArg, [argsArray])
简单来说call()和apply()两者的作用一样,都是改变作用域,两者唯一的区别就是第二个参数
应用MDN文档上的一句话:链接
cal()方法的作用和apply()方法类似,只有一个区别,就是call()方法接受的是若干个参数的列表,而apply()方法接受的是一个包含多个参数的数组
总的来说就是:call()接受的是参数列表,apply接受的是包含参数的数组,
两者区别例子:
function Animal(name) {
this.name = name;
this.showName = function () {
console.log(this.name);
};
}
function Cat(name) {
Animal.call(this, name);
}
Cat.prototype = new Animal();
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();//"Black Cat"
dog.showName();//"Black Dog"
两个方法的运行方式基本相同,唯一不同的就是参数,运行方式可以参照上文
同样的,网上搜来的apply()的资料如下:
apply方法:
语法:apply(thisObj,[argArray])
定义:应用某一对象的一个方法,用另一个对象替换当前对象。
说明:
如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。
JS的this总结(上)-call()和apply()的更多相关文章
- js插件---IUpload文件上传插件(包括图片)
js插件---IUpload文件上传插件(包括图片) 一.总结 一句话总结:上传插件找到真正上传位置的代码,这样就可以知道整个上传插件的逻辑了, 找资料还是github+官方 1.如何在js中找到真正 ...
- 使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器
使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进 ...
- JavaScript进阶(九)JS实现本地文件上传至阿里云服务器
JS实现本地文件上传至阿里云服务器 前言 在前面的博客< JavaScript进阶(八)JS实现图片预览并导入服务器功能>(点击查看详情)中,实现了JS将本地图片文件预览并上传至阿里云服务 ...
- js基础进阶--图片上传时实现本地预览功能的原理
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...
- js实现图片粘贴上传到服务器并展示
最近看了一些有关于js实现图片粘贴上传的demo,实现如下: (这里只能检测到截图粘贴和图片右键复制之后粘贴) demo1: document.addEventListener('paste', fu ...
- 基于原生JS封装数组原型上的sort方法
基于原生JS封装数组原型上的sort方法 最近学习了数组的原型上内置方法的封装,加强了用原生JS封装方法的能力,也进一步理解数组方法封装的过程,实现的功能.虽然没有深入底层,了解源码.以下解法都是基于 ...
- PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件
PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...
- JS中的继承(上)
JS中的继承(上) 学过java或者c#之类语言的同学,应该会对js的继承感到很困惑--不要问我怎么知道的,js的继承主要是基于原型(prototype)的,对js的原型感兴趣的同学,可以了解一下我之 ...
- JS核心系列:浅谈 call apply 与 bind
在JavaScript 中,call.apply 和 bind 是 Function 对象自带的三个方法,这三个方法的主要作用是改变函数中的 this 指向,从而可以达到`接花移木`的效果.本文将对这 ...
随机推荐
- Redis-误操作尝试恢复
如果不小心使用了flushall把全部数据清楚怎么办 127.0.0.1:6379> set site www.google.com OK 127.0.0.1:6379> set addr ...
- Grass Cownoisseur[Usaco2015 Jan]
题目描述 In an effort to better manage the grazing patterns of his cows, Farmer John has installed one-w ...
- Hibernate学习总汇
Hibernate的基础知识 什么是框架? 什么是Hibernate框架? |--1.应用在javaee三层结构中的dao层 |--2.在dao层里面做对数据库进行crud操作,使用hibernate ...
- Sublime text 3搭建Python开发环境
前辈们说的已经很多了,但是自己依旧会出现各种问题,写篇日志记录这次的搭建经验. 1.安装python,我用的是python3.5,可以上官网下载 2.安装Sublime text 3,可以上官网下载 ...
- UIButton 中高亮取消
1.图片 取消高亮方法 a.第一种方法 [withdrawalBtn setAdjustsImageWhenHighlighted:NO]; b.第二种方法 [withdrawalBtn setIma ...
- cornerstone 使用报错 working copy ... is too old(format 10 created by subversion 1.6)
1.....本来正常使用的cornerstone 突然出现这个问题 图片如下 2....解决方案,,,,也搜集了方法,,但是最后竟然就这样解决了,,完全搞不懂的解决方案啊 如图 3......如有错误 ...
- HDU 1028 Ignatius and the Princess III:dp or 母函数
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1028 题意: 给你一个正整数n,将n拆分成若干个正整数之和,问你有多少种方案. 注:"4 = ...
- owncloud存储云服务搭建
owncloud是一款开源的存储云,用php写的,其作用可以像百度网盘那样存放文件到这个云当中, 只要能连上网,手机,平板,电脑都可以从中下载或者上传文件,用起来非常还不错,部署的过程也很简单,废话不 ...
- 谈谈出入React框架踩过的坑
1 在JSX的元素中写入内联样式,例如<div style={"color:blue"}></div> 报错:warning:Style prop valu ...
- asp.net core MVC 全局过滤器之ExceptionFilter异常过滤器(一)
本系类将会讲解asp.net core MVC中的内置全局过滤器的使用,将分为以下章节 asp.net core MVC 过滤器之ExceptionFilter异常过滤器(一) asp.net cor ...