改变this指向了解一下

简介: 改变this指向了解一下

首先呢,我们知道return可以改变this指向


function Fn(name){
  this.name=name;
  return {};//undefined,改变了this的指向,指向该未定义对象
}
var fn=new Fn("maomin");
console.log(fn.name);


另一种是我们常用的方法,就是给将this赋值给一个变量。


function fn1(age) {
  var that=this;
  that.age=age;
  console.log(this.age)//21
}
fn1("21");


但是上面的方法太low了。 接下来我们说一下关于改变this指向的三种高大上方法:

  1. call() (1)可以改变匿名函数this指向

var box=document.querySelector("#box");
box.onclick = function(){
  (function(){
    console.log(this); //box
  }).call(this);
};


(2)可以继承方法


function Fn8(name,girlfriend) {
  this.name=name;
  this.girlfriend=girlfriend;
}
function Fn9(name,girlfriend) {
  Fn8.call(this,name,girlfriend);//第一个传的是一个对象,就是你要借用的那个对象,除了第一个参数后面的参数将作为实际参数传入到函数中。
  console.log(this.name,this.girlfriend);//maomin, xqm
}
var fn9=new Fn9("maomin","xqm");


(3)主动执行函数


function fnn() {
  var arr=[this.index,2,3]
  console.log(arr);//123
}
var val={index:1};
fnn.call(val);
//call就是挨个传值,apply传一个数组,bind也是挨个传值,但和call和bind还有多少不同,使用call和apply会直接执行这个函数,而bind并不会而是将绑定好的this重新返回一个新函数,什么时候调用由你自己决定。


2.bind() bind 的其中一个用法就是:绑定函数,使其无论怎么样调用都用相同的 this。


var obj={
  ofn:function(){
    console.log(this);//obj
  }
}
obj.ofn();


那如果这样呢 var ofn1=obj.ofn; ofn1();//然而这时,console.log(this);打印出来则是window。ofn1只是将obj对象中的方法复制过来,但是this指向变了。ofn1()可以看作成window.ofn1() 为了改变这种现状,可以用bind().


(1).


var objj={
  ofnn:function(){
    console.log(this);
  }
}
var oB=objj.ofnn;
oB.bind(objj)();//ofnn


(2).


var obj = {
     num: 100,
     numFun: function(){
         console.log(this.num);//100
     }
 }
 var numFunCopy = obj.numFun;
 numFunCopy.bind(obj)();
var mName={name:"我是测试的值1"};
var nName={
  name:"我是测试的值2",
  say:function(){
    console.log(this.name);//我是测试的值1
  }.bind(mName)
}
nName.say();


3.apply()


function f(x, y){
console.log(x + y);
}
f.apply(null, [1, 1]) // 2


apply方法的第一个参数也是this所要指向的那个对象,如果设为null或undefined,则等同于指定全局对象。 第二个参数则是一个数组,该数组的所有成员依次作为参数,传入原函数。 原函数的参数,在call方法中必须一个个添加,但是在apply方法中,必须以数组形式添加。


var a = [24,30,2,33,1]
Math.max.apply(null,a) //33  数组中最大值


总结:


  1. call 、 apply 、bind 均能改变this 指向
  2. apply 每次执行产生一个新函数,call、apply 不会
  3. call ,bind 接收多个参数绑定到函数,参数单一传入,apply 接收方式为数组



相关文章
|
3月前
定义的位置
定义的位置不一样【重点】局部变量:在方法的内部 局部变量和成员变量 1.定义的位置不一样【重点】 局部变量:在方法的内部 成员变量:在方法的外部,直接写在类当中 2.作用范围不一样【重点】 局部变量:只有方法当中才可以使用,出
43 1
|
1天前
定义的位置
定义的位置不一样【重点】局部变量:在方法的内部 局部变量和成员变量 1.定义的位置不一样【重点】 局部变量:在方法的内部 成员变量:在方法的外部,直接写在类当中 2.作用范围不一样【重点】 局部变量:只有方法当中才可以使用,出 定义的位置不一样【重点】局部变量:在方法的内部
7 0
|
12月前
|
JavaScript 前端开发 网络安全
Video.js实现在html页面播放rtmp流媒体
Video.js实现在html页面播放rtmp流媒体
1036 0
|
3月前
|
人工智能 搜索推荐 前端开发
MindSearch技术详解,本地搭建媲美Perplexity的AI思·索应用!
MindSearch是书生·浦语团队提出的AI搜索框架,基于InternLM2.5 7B模型,采用multi-agent框架模拟人类思维,先规划再搜索,提高信息搜集的准确性和完整性。
|
6月前
|
开发者 iOS开发
苹果上架常见问题 -appstore 开发者名称修改
苹果上架常见问题 -appstore 开发者名称修改
|
6月前
|
SQL JavaScript
若依框架 ------- 三级联动之下拉框查询
若依框架 ------- 三级联动之下拉框查询
755 0
|
移动开发 前端开发 JavaScript
淘宝小部件 Canvas 渲染流程与原理全解析
淘宝小部件 Canvas 渲染流程与原理全解析
399 0
淘宝小部件 Canvas 渲染流程与原理全解析
|
缓存 Java 数据库
【Spring Cloud系列】- RestTemplate使用详解(下)
【Spring Cloud系列】- RestTemplate使用详解(下)
454 0
|
6月前
|
存储 算法
数据结构(数组、链表、栈、队列、树)(二)
数据结构(数组、链表、栈、队列、树)(二)
|
存储 SQL 安全
openGauss 体系结构介绍
openGauss 体系结构介绍
374 0