欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

javascript--- 改变this指向的方法 (赋值、call和apply )

程序员文章站 2022-04-10 19:29:08
**javascript从入门到跑路-----小文的js学习笔记(1)---------script、alert、document。write() 和 console.log 标签javascript从入门到跑路-----小文的js学习笔记(2)---------语法构成、关键字和保留字、变量javascript从入门到跑路-----小文的js学习笔记(3)---------javascript中的几种数据类型……javascript从入门到跑路-----小文的js学习笔记目录**&nb...

**
javascript从入门到跑路-----小文的js学习笔记(1)---------script、alert、document。write() 和 console.log 标签

javascript从入门到跑路-----小文的js学习笔记(2)--------- 语法构成、关键字和保留字、变量

javascript从入门到跑路-----小文的js学习笔记(3)---------javascript中的几种数据类型


javascript从入门到跑路-----小文的js学习笔记目录
**

       关注小文我们一起学习进步。

上一节我们学习了this的指向,this的指向会随着执行环境的改变而改变,

昨天一共学习了以下几种情况:

  1. 如果单独使用或者是在函数中,我们的this会指向全局(即 window)
  2. 在方法和事件中,this 指向的就是该方法所属(事件触发)的对象(元素)
  3. 如果产生了函数中还有一个函数(闭包),那么.内部函数中的this指向于window

那就像第三点 这种情况 this指向的是全局,但是我们想要的又是局部的变量,那么该怎么做?这时就需要改变我们this的指向,

1、赋值

第一种方法我们通过赋值 一个新的变量来代替this,改变指向。

举例:
javascript--- 改变this指向的方法 (赋值、call和apply )
执行结果:因为昨日举过这个例子,因为形成了闭包,所以内部函数的this 指向的是全局变量,所以这里的this.name 指的是“小蓝”。
javascript--- 改变this指向的方法 (赋值、call和apply )
但是我们要改变this的指向 改为内部变量,意思就是想要这里输出的是“小绿”,
javascript--- 改变this指向的方法 (赋值、call和apply )
所以我们在闭包外,将this 赋值给一个新的变量 thiss(因为在这个位置 的this 指代的就是我们内部的那个对象obj,所以将其赋值给thiss),因为作用域链 是内部的能访问外部的,所以即使是闭包我们内部的也能访问这个变量,所以里面改为 thiss.name 那么指代的就是内部对象的名字。

执行结果:很显然这里不再指向全局,而是内部了
javascript--- 改变this指向的方法 (赋值、call和apply )

         注意:光理论是不够的 ,在此送大家2020最新企业级 Vue3.0/Js/ES6/TS/React/node等实战视频教程,点击此处免费获取,小白勿进哦

下面说另外两种方法,

2、call 和 apply

定义: 使用一个对象的方法。用一个对象替换当前对象

举个栗子:同样是这个例子
javascript--- 改变this指向的方法 (赋值、call和apply )
执行结果:同样上面那个例子,很显然由于闭包,这里this指向的是window ,
javascript--- 改变this指向的方法 (赋值、call和apply )
然后我们需要它指向obj,弹出小绿,所以,这里我们用一下call ,
javascript--- 改变this指向的方法 (赋值、call和apply )
执行结果:那么它的对象就变为我们括号内的对象obj了,当然这里用apply 效果一样。
javascript--- 改变this指向的方法 (赋值、call和apply )
     虽然call和apply 都可以用来指定一个对象来代替另一个对象执行方法,但是二者还是有一定的区别。

说区别前,先来看看二者语法:

call语法: 方法.call(对象,参数1,参数2,参数3......)
apply语法: 方法.apply(对象,[参数1,参数2,参数3....])

虽然二者的功能一样都可以改变对象,但是call可以接受多个参数,直接写在括号内并排;而apply 只能支持两个参数,第二个参数是一个大数组。

举个栗子:看好我们创建了一个函数,可以实现传入两个参数之后,实现求积
javascript--- 改变this指向的方法 (赋值、call和apply )
然后我们下面再创建一个函数,但是里面什么都不写,也传入c和d两个参数,然后我们写下去借我们fn1 函数的功能,将 执行fn1 的对象变更,然后参数改为c和d,然后我们下面调用函数,
javascript--- 改变this指向的方法 (赋值、call和apply )
执行结果,很显然fn2虽然没写 但是也拥有了和fn1一模一样的 功能
javascript--- 改变this指向的方法 (赋值、call和apply )
上面是用的call,那么下面我们同样是上面这个例子,用apply来看一下,二者效果一样,只不过写法稍有不同,apply后面第二个参数要写成数组。
javascript--- 改变this指向的方法 (赋值、call和apply )
**

           The road is still to go, just don’t look back.
                                    ------------------- 路还是要走 只是不回头

javascript--- 改变this指向的方法 (赋值、call和apply )

本文地址:https://blog.csdn.net/qq_45948983/article/details/107481723

相关标签: js javascript