【前端学习笔记】call、apply、bind方法
1.call()方法:
// move函数实现移动平面图上一个点位置功能
var move = function(x,y){
this.x += x;
this.y += y;
}
// 定一个点p
var p = {x:1, y:1};
// 调用call 方法,此时p点直接会移动。
move.call(p,1,2);
console.log(p); // --> {x:2,y:3}
2.apply()方法:
// move函数实现移动平面图上一个点位置功能
var move = function(x,y){
this.x += x;
this.y += y;
}
// 定一个点p
var p = {x:1, y:1};
// 调用apply方法,此时p点直接会移动。
move.apply(p,[1,2]);
console.log(p); // --> {x:2,y:3}
3.bind()方法:
/** 函数作为返回值--bind **/
// move函数实现移动平面图上一个点位置功能
var move = function(x,y){
this.x += x;
this.y += y;
}
// // // 定一个点p
var p = {x:1, y:1};
// // bind方法收受一个参数,并返回一个接受余下参数的函数过程。此时p点并没有移动。
var pmove0 = move.bind(p);
console.log(p); // --> {x:1,y:1}
// // 这时p移动到了(2,3)位置。
pmove0(1,2);
console.log(p); // --> --> {x:2,y:3}
// 当然你也可以这样调用
var pmove1 = move.bind(p,1);
console.log(p);
pmove1(2);
console.log(p);
// 或者这样调用
var pmove2 = move.bind(p,1,2);
console.log(p);
pmove2();
console.log(p);
//bind()兼容写法
if (!Function.prototype.bind) { //如果原型上没有bind方法
Function.prototype.bind = function (context) {
var args = arguments, //获取要传入的所有参数
obj = arguments[0], //获取要绑定的上下文
func = this; //获取要调用的函数
return function(){ //返回一个新的函数
var argc = Array.prototype.slice.call(args,1); //获取bind的剩余传入参数
Array.prototype.push.apply(argc,arguments); //将调用时的参数放到最后
return func.apply(obj,argc); //使用新的this执行func函数
}
}
}
4.call()、apply()方法改变this指向
//例子调用apply()方法,call()方法相同
function test(){
console.log('I am test');
}
var obj ={
move:function(x,y){
console.log(x);
console.log(y);
console.log(this); // --> obj{move:function(){}}
}
}
obj.move(44,55);
// 调用apply方法
obj.move.apply(test,[66,88]); // --> function test(){ console.log('I am test') ;}
5.bind()方法改变this指向
//调用bind()方法
function test(){
console.log('I am test');
}
var obj ={
move:function(x,y){
console.log(x);
console.log(y);
console.log(this);
}
}
obj.move(44,55);// this --> obj{move:function(){}} var testMove = obj.move.bind(test);
testMove(66,88); // this --> function test(){ console.log('I am test'); };
【前端学习笔记】call、apply、bind方法的更多相关文章
- 【前端】Web前端学习笔记【2】
[2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...
- 【前端】Web前端学习笔记【1】
... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...
- 前端学习笔记 --ES6新特性
前言 这篇博客是我在b站进行学习es6课程时的笔记总结与补充. 此处贴出up主的教程视频地址:深入解读ES6系列(全18讲) 1.ES6学习之路 1.1 ES6新特性 1. 变量 2. 函数 3. 数 ...
- Web前端学习笔记(001)
....编号 ........类别 ............条目 ................明细....................时间 一.Web前端学习笔记 ...
- JavaScript学习(2)call&apply&bind&eval用法
javascript学习(2)call&apply&bind&eval用法 在javascript中存在这样几种特别有用的函数,能方便我们实现各种奇技淫巧.其中,call.bi ...
- JavaScript内置一些方法的实现原理--new关键字,call/apply/bind方法--前戏
new关键字,call/apply/bind方法都和this的绑定有关,在学习之前,首先要理解this. 一起来学习一下this吧 首先.this是一个对象. 对象很好理解,引用类型值,可以实现如th ...
- JS 的 call apply bind 方法
js的call apply bind 方法都很常见,目的都是为了改变某个方法的执行环境(context) call call([thisObj[,arg1[, arg2[, [,.argN]]]] ...
- web前端学习笔记
web前端学习笔记(CSS盒子的定位) 相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准 ...
- 【python学习笔记】9.魔法方法、属性和迭代器
[python学习笔记]9.魔法方法.属性和迭代器 魔法方法:xx, 收尾各有两个下划线的方法 __init__(self): 构造方法,创建对象时候自动执行,可以为其增加参数, 父类构造方法不会被自 ...
- Java8学习笔记(八)--方法引入的补充
在Java8学习笔记(三)--方法引入中,简要总结了方法引入时的使用规则,但不够完善.这里补充下几种情况: 从形参到实例方法的实参 示例 public class Example { static L ...
随机推荐
- 关于homebrew使用时遇到的问题: Error: Could not symlink bin/gdb/usr/local/bin is not writable.
# 关于homebrew使用时遇到的问题: Error: Could not symlink bin/gdb/usr/local/bin is not writable. 这是我在给我的Mac电脑安装 ...
- 20155330 实验二 Java面向对象程序设计
20155330 实验二 Java面向对象程序设计 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设计模式 实验步 ...
- HBase——使用Put迁移MySql数据到Hbase
先上code: /** * 功能:迁移mysql上电池历史数据到hbase * Created by liuhuichao on 2016/12/6. */ public class MySqlToH ...
- 1116: [POI2008]CLO
1116: [POI2008]CLO https://lydsy.com/JudgeOnline/problem.php?id=1116 分析: 单独考虑每个联通块的情况. 设这个联通块里有n个点,那 ...
- kallsyms , addr to symbol
#!/usr/bin/env python # addr2sym.py - resolve addresses to symbols, using a map file # Reads a log f ...
- json简单操作
通过内置的json模块对json数据进行编码 1.对数据进行编码(dumps) import json #使用dumps将python数据结构转换为json data = { , "name ...
- 第五章Web应用与应用层协议
Web应用与应用层协议 本篇博文中的主要参考文献是<计算机网络高级教程>,分别是吴功宜老先生和吴英教授合著.这部教程是我研究生老师所推荐的网络必读科目,由于该教程讲解的基础知识详细,但内容 ...
- 从零开始的Python学习Episode 10——函数
函数 一.函数的创建 简单格式 def function_name(参数表): 函数体 return 如果没有写return,函数会默认返回一个none 二.函数的参数 必需参数: 调用函数时必需参数 ...
- 常用JDBC数据库驱动包和类名
MySQL数据库: 1)驱动包:https://mvnrepository.com/artifact/mysql/mysql-connector-java(下载路径) 2)驱动类名:com.mysql ...
- 2019CSUST集训队选拔赛题解(三)
PY学长的放毒题 Description 下面开始PY的香港之行,PY有n个要去的小吃店,这n个小吃店被m条路径联通起来. PY有1个传送石和n−1个传送石碎片. PY可以用传送石标记一个小吃店作为根 ...