改变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() 方法调用一个对象.简单理解为调用函数的方式, ...

改变this指向的方法

改变this指向的方法相关推荐

最新文章

热门文章