改变this指向的方法
(1)、call方法
1、call()方法可以进行普通函数的调用
2、call()方法可以改变this的指向,如果没有参数,this指向window
3、call()方法可以改变this的指向,如果有一个参数,this指向该参数
4、call()方法可以改变this的指向,如果有多个参数,this指向第一个参数,剩下的是个参数列表(构造函数继承的案例)
(2)、apply方法
1、 apply()方法可以进行普通函数的调用
2、apply()方法可以改变this的指向,如果没有参数,this指向window
3、apply()方法可以改变this的指向,如果有一个参数,this指向该参数
4、apply()方法可以改变this的指向,如果有多个参数,第一个参数是null或者window,第二个参数是数组
(3)、bind方法
推荐使用第二种形式,第三种用的相对较少,但也是必须掌握的内容。
bind() 函数会创建一个新函数(称为绑定函数),新函数与被调函数(绑定函数的目标函数)具有相同的函数体(在 ECMAScript 5 规范中内置的call属性)。当目标函数被调用时 this 值绑定到 bind() 的第一个参数,该参数不能被重写。绑定函数被调用时,bind() 也接受预设的参数提供给原函数。一个绑定函数也能使用new操作符创建对象:这种行为就像把原函数当成构造器。提供的 this 值被忽略,同时调用时的参数被提供给模拟函数。
- bind()不能进行函数的调用
- 可以改变this指向
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body></body><script>// 1、var fn1 = function () {console.log("我是函数表达式");}// fn1();fn1.call();var name = "小红";var obj1 = {name: "小花",getName: function () {console.log(1111);console.log(this.name);}.bind()}obj1.getName();/* obj1.getName();//小花obj1.getName.call();//小红 */var obj2 = {name: "小刚",getName: function () {console.log(this.name);}}obj2.getName();obj2.getName.call();obj2.getName.call(obj1); //小花// 2、fn1.apply()obj1.getName.apply(); //小红obj2.getName.apply(obj1); //小花console.log(Math.max(20, 30, 50)); //50console.log(Math.max.call(window, 20, 30, 50)); //50console.log(Math.max.apply(Window, [20, 30, 50])); //50console.log(Math.max.apply(null, [20, 30, 50])); //50// 3、// fn1.bind();var fn2 = function () {console.log(22222222222222);console.log(this.name); //小红 小花console.log("bind调用");}.bind()// .bind(obj1)fn2()// fn2.bind();var name = "喜羊羊";var object = {name: "懒洋洋",getName: function () {var name = "美羊羊";var that = this;console.log(this.name); //懒羊羊console.log(name); //喜羊羊 美羊羊function func1() {console.log(this.name); //喜羊羊console.log(name); //美羊羊 undefined// var name = "村长羊";}func1();var name = "暖羊羊"var name = function () {console.log(name); //f name()console.log(this.name);}name();var func2 = function () {console.log("999999999999999999999999999999");console.log(name);console.log(this.name); //喜羊羊 懒羊羊// }.bind(this)return name;// console.log(this.name); }.bind(that)console.log(func2());func2.call(this);}}// }object.getName();
</script></html>
改变this指向的方法相关推荐
- JavaScript基础--改变this指向的方法
1. this指向 this随处可见,一般谁调用,this就指向谁.this在不同环境下,不同作用下,表现的也不同. 以下几种情况,this都是指向window的: ① 全局作用下,this指向的是w ...
- this指向及改变this指向的方法
原先总结过this指向问题,但看了大佬们写的之后,觉得自己遗漏了很多点,所以,结合大佬们的,重写一遍 一.函数的调用方式决定了 this 的指向不同: 1.普通函数调用,此时 this 指向 wind ...
- 前端改变this指向的方法有哪些?如何判断this指向?
bind.call.apply.箭头函数.new.这些都可以改变this指向,他们之间的区别是 1.call 和 apply 的this指向 call 和 apply其实是一样的,区别在于传参的时候参 ...
- this指向和改变其指向的方法
this笔记(仅作为个人学习使用) 一.this 的指向 在 ES5 中,其实 this 的指向,始终坚持一个原理:this 永远指向最后调用它的那个对象. 下面这个例子,这里的 a() 是被wind ...
- this指向和如何改变this指向 (详解)
注:颜色标识为重要字眼. 目录:-this详解 -改变this指向的方法 一.this概述 它是JS的关键词,是一个代词"指代不明",需要代码执行过程中根据 ...
- 作用域和改变this指向
1,作用域和自由变量 作用域代表了一个变量的合法范围,一个变量的作用域是程序源代码中定义的这个变量的区域. 1,全局作用域 不在任何函数内声明的变量(函数内省略var的也算全局)称作全局变量 就是在最 ...
- 改变this指向的操作
改变this指向的方法 之前已近介绍过this指向的情况,其实this的指向是可以改变的,有些人就会好奇,那怎么样改变this的指向呢? 其实改变this的指向,有三种比较常用的方法. 1:call( ...
- 箭头函数 改变this指向
1.箭头函数 <div>我是div</div><script>const oDiv = document.querySelector('div');// 普通函数o ...
- js 改变this指向的几种方法(个人学习笔记)
1.call()和apply() 两中方法都能改变this指向,很类似,区别主要是第二个以后参数, call():第一个参数表示要把this指向的新目标,第二个之后的参数其实相当于传参,参数以,隔开 ...
- javaScript改变this指向的三种方法
javaScript提供了一些函数方法帮助我们处理函数内部this的指向问题,常用的有bind().call().apply()三种方法 1.call() 方法调用一个对象.简单理解为调用函数的方式, ...
最新文章
- 区块链软件公司:区块链运用在金融上运用的优点有哪些?
- SpingBoot 整合 kafka Elk
- [论文笔记]QANET: COMBINING LOCAL CONVOLUTION WITH GLOBAL SELF-ATTENTION FOR READING COMPREHENSION
- 文件与文件系统的压缩与打包
- html文本文档整人代码,一些bat恶搞代码
- 高程拟合MATLAB二次曲面,GPS高程二次曲面拟合及其程序
- 计算机科学论文生成器,数学论文生成器:从此一天一篇不再愁
- 【eoeAndroid社区索引】android 条形码的知识汇总
- 计算机软件故障实验报告,湖大选修实验报告计算机软硬件一般故障的排除.doc...
- Android 滑动放大,Android多点触控实现对图片放大缩小平移,惯性滑动等功能
- Datawhale Pandas Task08 文本数据
- cisco 路由器 ADSL拨号上网配置
- 牛皮凉席不好的原因!
- Re32:读论文 Summarizing Legal Regulatory Documents using Transformers
- 上海落户计算机水平毕业研究生,2021上海积分落户应届毕业生直接落户上海
- c语言 运行经过八个翻译阶段,GitHub - BUAA-SE-Compiling/miniplc0-handbook: miniplc0 指导书...
- 程序设计思维与实践 Week15 作业A - ZJM 与霍格沃兹
- @Qualifier注解的使用
- octopus - UI框架
- openGauss理事会筹备会圆满成功