浅谈一下js中的this

1. 对this对象的理解：this 是执行上下文中的一个属性，它指向最后一次调用这个方法的对象。

* 任何函数本质上都是通过某个对象来调用的,如果没有直接指定就是window

* 所有函数内部都有一个变量this

* 它的值是调用函数的当前对象

2. 不同情况下this的值

* test(): window

* p.test(): p

* new test(): 新创建的对象

* p.call(obj): obj

  function Person(color) {console.log(this)this.color = color;this.getColor = function () {console.log(this)return this.color;};this.setColor = function (color) {console.log(this)this.color = color;};}Person("red"); //this是谁? windowvar test = p.setColor;test(); //this是谁? windowfunction fun1() {function fun2() {console.log(this);}fun2(); //this是谁? window}fun1();var p = new Person("yello"); //this是谁? pp.getColor(); //this是谁? pvar obj = {};p.setColor.call(obj, "black"); //this是谁? obj

3. 什么时候需要改变this的值

举个栗子：

页面上有一个 p 标签和一个 button 按钮，你需要通过点击 button 按钮来改变 p 标签里面的值，此时就需要改变 input 框的 this 指向，实现功能。

4. 如何改变this的值

使用ES6箭头函数（this 始终指向函数声明时所在作用域下的this值）

          var a = 1;var obj = {a: 2};function fun () {var a = 3;let f = () => console.log(this.a);f();};fun();//1fun.call(obj);//2
// fun直接调用，fun的上下文中的this值为window，注意，这个地方有点绕。fun的上下文就是此箭头函数所在的上下文，因此此时f的this为fun的this也就是window。//fun.call(obj)再次调用的时候，新的上下文创建，fun此时的this为obj，也就是箭头函数的this值。

在函数内部暂存 _this=this
JavaScript 提供了call、apply、bind这三个方法来切换this的指向

5. call、apply、bind方法对this的影响？

这三个方法都可以显示的指定调用函数的 this 指向：

call 方法接收的参数，第一个是 this 绑定的对象；后面的参数（数量不固定）则是函数调用时所需的参数，每个参数被依次传入函数。

        let obj = {x: 0,name: 'obj1'}function fn1(x, y) {console.log(this)console.log(x + y)}fn1.call(null, 1, 2) //this指向window  3fn1.call(obj, 1, 2) //this指向obj  3

apply 方法接收两个参数：一个是 this 绑定的对象，一个是参数数组。

        let obj = {x: 0,name: 'obj1'}function fn2(arr) {console.log(this)console.log(arr)}fn2([1, 2, 7]) // this指向window  [1, 2, 7]fn2.apply(obj, [1, 2, 7]) //this指向obj 1

bind 方法通过传入一个对象，返回一个 this 绑定了传入对象的新函数。我们必须要手动去调用该新函数才会执行。

        let obj = {x: 1,name: 'obj1'}let ob = {y: 4,name: 'obj1'}function fn3(o, z) {console.log(this)return (this.x + o.y + z)}fn3.bind(obj, ob) // 不执行 无输出fn3.bind(obj, ob)() //  执行 this指向objvar m = fn3.bind(obj, ob);console.log(m(3)); //this指向obj  8  (柯里化)

浅谈一下js中的this相关推荐

ajax参数中有加号,浅谈在js传递参数中含加号(+)的处理方式
一般情况下,URL 中的参数应使用 url 编码规则,即把参数字符串中除了 -_. 之外的所有非字母数字字符都将被替换成百分号(%)后跟两位十六进制数,空格则编码为加号(+). 但是对于带有中文的参数 ...
浅谈V8引擎中的垃圾回收机制
浅谈V8引擎中的垃圾回收机制这篇文章的所有内容均来自朴灵的<深入浅出Node.js>及A tour of V8:Garbage Collection,后者还有中文翻译版V8 之旅: 垃 ...
c语言弱符号与函数指针,浅谈C语言中的强符号、弱符号、强引用和弱引用【转】...
首先我表示很悲剧,在看<程序员的自我修养--链接.装载与库>之前我竟不知道C有强符号.弱符号.强引用和弱引用.在看到3.5.5节弱符号和强符号时,我感觉有些困惑,所以写下此篇,希望能和同样 ...
html设置视口,浅谈移动端中的视口(viewport)的具体使用
在 PC 端,视口指的是浏览器的可视区域,其宽度和浏览器窗口的宽度保持一致.在 CSS 标准文档中,视口也被称为初始包含块,它是所有 CSS 百分比宽度推算的根源,给 CSS 布局限制了一个最大宽度. ...
mysql declare与set的区别_浅谈MySQL存储过程中declare和set定义变量的区别
在存储过程中常看到declare定义的变量和@set定义的变量.简单的来说,declare定义的类似是局部变量,@set定义的类似全局变量. 1.declare定义的变量类似java类中的局部变量,仅 ...
浅谈单片机程序设计中的“分层思想”！
浅谈单片机程序设计中的"分层思想",并不是什么神秘的东西,事实上很多做项目的工程师本身自己也会在用.看了不少帖子都发现没有提及这个东西,然而分层结构确是很有用的东西,参透后会有一种 ...
浅谈网络爬虫中广度优先算法和代码实现
前几天给大家分享了网络爬虫中深度优先算法的介绍及其代码实现过程,没来得及上车的小伙伴们可以戳这篇文章--浅谈网络爬虫中深度优先算法和简单代码实现.今天小编给大家分享网络爬虫中广度优先算法的介绍及其代码 ...
浅谈软件性能测试中关键指标的监控与分析（转）
浅谈软件性能测试中关键指标的监控与分析一.软件性能测试需要监控哪些关键指标? 软件性能测试的目的主要有以下三点: Ø 评价系统当前性能,判断系统是否满足预期的性能需求. Ø 寻找软件系统可能存在 ...
php hasmany,浅谈laravel orm 中的一对多关系 hasMany
个人对于laravel orm 中对于一对多关系的理解文章表 article,文章自然可以评论,表 comment 记录文章的评论,文章和评论的关系就是一对多,一篇文章可以有多个评论. 在 comm ...

浅谈一下js中的this

浅谈一下js中的this相关推荐

最新文章

热门文章