改变函数内this指向方法——call、apply、bind
javascript为我们专门提供了一些函数方法来帮我们更优雅的处理函数内部this的指向问题，常用的有bind( )、call( )、apply( )三种方法。
相同点：
都可以改变函数内部的this指向。
区别点：
1、call和apply传递的参数不一样，call传递参数aru1， aru2... 形式，apply必须数组形式[arg]
2、bind不会调用函数，可以改变函数内部this指向
主要应用场景：
1、call经常做继承。
2、apply经常跟数组有关系。比如借助于数学对象实现数组最大值最小值。
3、bind不会调用函数，可以改变函数内部this指向。
call方法
call( )方法，调用一个对象。简单理解为调用函数的方法，但是它可以改变函数的this指向。
应用场景：经常做继承。
var o = {
name: 'andy'
}
function fn(a, b) {
console.log(a + b);
}
fn.call(o, 1, 2);
// call 第一个可以调用函数 第二个可以改变函数内的this 指向
// call 的主要作用：可以实现继承
function Father(uname, age, sex) {
this.uname = uname;
this.age = age;
this.sex = sex;
}
function Son() {
Father.call(this, uname, age, sex);
}
var son = new Son('刘德华', 18, '男');
apply( )方法
apply( )方法调用一个函数。简单理解为调用函数的方式，但是它可以改变函数的this指向。
应用场景：经常跟数组有关系
var o = {
name: 'andy'
};
function fn(arr) {
console.log(arr); // 'pink'
};
fn.apply(o, ['pink']);
// 1. 也是调用函数 第二个可以改变函数内部的this指向
// 2. 但是他的参数必须是数组(伪数组)
// 3. apply 的主要应用 比如说我们可以利用 apply 借助于数学内置对象求数组最大值
var arr = [1, 66, 3, 99, 4];
var arr1 = ['red', 'pink'];
var max = Math.max.apply(Math, arr);
var min = Math.min.apply(Math, arr);
console.log(max, min); // 99 1
bind方法
bind( )方法不会调用函数。但是能改变函数内部this指向。
var o = {
name: 'andy'
};
function fn(a, b) {
console.log(this);
console.log(a + b);
};
var f = fn.bind(o, 1, 2); // 此处的f是bind返回的新函数
f(); // 调用新函数 this指向的是对象o 参数使用逗号隔开
案例：我们有一个按钮，当我们点击了之后，就禁用这个按钮，3秒钟之后开启这个按钮
<body>
<button>点击</button>
<button>点击</button>
<button>点击</button>
<script>
var btns = document.querySelectorAll('button');
for (var i = 0; i < btns.length; i++ ) {
btns[i].onclick = function() {
this.disabled = true;
setTimeout(function() {
this.disabled = false;
}.bind(this), 2000);
}
}
</script>
</body>
改变函数内this指向方法——call、apply、bind的更多相关文章
- 函数内this指向+排序+找出数组大小项+Math类
解决函数内this指向: 1,可以在函数外提前声明变量 _this/that = this 2,通过apply()和call()来修改函数内的this指向 二者区别: 用法是一样的,参数形式不一样 f ...
- mathAge.call(btn) 函数call 改变函数内 this #js
mathAge.call(btn) 函数call 改变函数内 this
- this指向与call,apply,bind
this指向与call,apply,bind ❝ 「this」问题对于每个前端同学来说相信都不陌生,在平时开发中也经常能碰到,有时候因为「this」还踩过不少坑,并且「this」问题在面试题中出现的概 ...
- this的指向问题 call apply bind 中的this
在函数中this指向谁: 函数中的this指向谁,是由函数被调用的那一刻就确定下来的 平时确定一个函数中的this是谁,我们需要通过调用模式来确定 1. 函数调用模式 this ---> ...
- 函数的属性和方法， apply和call的区别及bind的使用
==>我的新博客中 http://www.suanliutudousi.com/2017/08/27/%E5%87%BD%E6%95%B0%E7%9A%84%E5%B1%9E%E6%80%A7% ...
- 作用域链和函数内部this指向问题以及bind、call、apply方法
作用域链和函数内部this指向问题以及bind.call.apply方法 作用域链 作用域是相对于变量而言的, 其意义就在与查找变量(确定变量的来处, 变量是否可以访问到, 确定变量在当前位置是否可以 ...
- 函数高阶（函数，改变函数this指向，高阶函数，闭包，递归）
一.函数的定义方式 1.函数声明方式 function 关键字(命名函数) 2.函数表达式(匿名函数) 3.new Function( ) var fn = new Function(‘参数1 ...
- 如何改变函数内部 this 的指向
一.函数内 this 的指向 1. this 的指向是当调用函数时确定的,调用的方式不同,this 的指向也就不同. 1.1 this 一般是指向调用者. 函数类型 this 的指向 普通函数 Win ...
- JavaScript内置一些方法的实现原理--new关键字，call/apply/bind方法--实现
先学习下new操作符吧 new关键字调用函数的心路历程: 1.创建一个新对象 2.将函数的作用域赋给新对象(this就指向这个对象) 3.执行函数中的代码 4.返回这个对象 根据这个的思路,来实现一个 ...
- 2018/12.21：函数this的指向
1. 解决函数内this指向 1. 可以在函数外提前声明变量 _this/that=this 2. 通过apply和call 来修改函数内的this指向 (1) ...
随机推荐
- 吉特日化MES配料工艺参数标准版-第二版
作者:情缘 出处:http://www.cnblogs.com/qingyuan/ 关于作者:从事仓库,生产软件方面的开发,在项目管理以及企业经营方面寻求发展之路 版权声明:本文版权归作者和博客园共有 ...
- .net 温故知新【16】：Asp.Net Core WebAPI 筛选器
一.筛选器 通过使用筛选器可在请求处理管道中的特定阶段之前或之后运行代码. 这即是我们经常听到的面向切面编程AOP(Aspect Oriented Programming)技术,AOP通过预编译方式和 ...
- 华企盾DSC客户端图标不显示常见处理方法
1.检查是否启用了360桌面.猎豹桌面之类的(兼容腾讯桌面),打强制显示客户端图标的补丁 2.是否被杀毒软件查杀 3.用Autoruns查看explorer项图标那一栏前10个是否有我们图标没有的话把 ...
- selenium之内联框架和多窗口切换
内联框架frame frame是一种内联框架,用于在html里面内部嵌入子页面(完整的html),对于这种元素,内部子页面的内容selenium无法直接控制,必须通过 switch_to跳转到对应的f ...
- 解决 IDEA 报错ERROR:JAVA: 无效的源发行版: 11
解决 IDEA 报错ERROR:JAVA: 无效的源发行版: 11 原因 一般都是创建工程的时候 一路next 默认选择了 Java Version 11, 而本地的jdk版本是 8 解决 File ...
- 苹果推信群发,苹果推信群发软件,iMessage群发系统
在当今数字化的时代,智能手机的普及率已达到了前所未有的高度,其中,苹果公司的iPhone无疑是市场上最受欢迎的智能手机之一,然而,与手机的广泛应用相伴的是,众多企业对于如何有效地向这些手机用户推送信息 ...
- Vulkan学习笔记之开发环境搭建
一.概述 最近因为工作需要开始学习Vulkan的相关知识,作为初学者,发现相对较好的学习资料莫过于vulkan-tutorial,在自己学习Vulkan的过程中,决定将自己的理解记录下来,一是为了加深 ...
- Python——第四章：推导式（Comprehensions）
推导式: 推导式是为了简化代码. 语法: 列表推导式:[数据 for循环 if判断] 集合推导式:{数据 for循环 if判断} 字典推导式:{k:v for循环 if判断} 元组推导式:不存在(因为 ...
- CTFHub XSS DOM跳转 WriteUp
前文:DOM反射XSS 进入网站,直接查看源代码,下面是关键代码,这里有xss漏洞: <script> var target = location.search.split("= ...
- [极客大挑战 2019]EasySQL 1
[极客大挑战 2019]EasySQL 1 观察题目,发现为登录界面,判断这道题的考点是SQL注入. 知识点 万能密码 知识点原理 当用户尝试登录时 网站后台会进行SQL查询,比如 [select * ...