javascript:this

ShevaKuilin 发布于2019-08-21 10:45 / 2817人阅读

摘要：关于是函数内部的一个特殊对象引用的是函数据以执行的环境对象在调用函数前的值并不确定不同的调用方式会导致值的改变。这两个方法的用途都是在特定的作用域中调用函数，实际上等于设置函数体内对象的值。

关于this

this是函数内部的一个特殊对象,this引用的是函数据以执行的环境对象,在调用函数前this的值并不确定,不同的调用方式会导致this值的改变。
可结合这篇文章理解环境对象的概念

window.num = 22;
var o = {num: 11};
function sayNum(){
    alert(this.num)
}
sayNum();//22
o.sayNum = sayNum;
o.sayNum();//11

记住：函数名仅仅是一个包含指针的变量而已。因此即使是在不同的环境中执行，全局的sayNum()函数与o.sayNum()指向的仍然是同一个函数。

1.全局作用域中调用函数时

全局作用域中调用，this对象引用的是window
匿名函数的执行具有全局性，因此其this对象通常也指向window

function fn1(){
    console.log(this);
}

fn1();

2.通过new操作符调用

this引用的是实例对象

function Person(name){
    this.name = name;
}
Person.prototype.printName = function(){
    alert(this.name);//Byron
};

var p1 = new Person("Byron");

3.作为对象的方法调用

this引用的是该对象

var obj1 = {
    name: "Byron",
    fn : function(){
        console.log(this);
    }
};

obj1.fn();

4.间接调用 call和apply

每个函数都包含两个非继承而来的方法：call()和apply()。这两个方法的用途都是在特定的作用域中调用函数，实际上等于设置函数体内this对象的值。也就是说，直接调用函数，调用时指定执行环境是谁

window.color = "red";
var o = {color: "blue"};
function sayColor(){
    alert(this.color);
}
sayColor.call(this);//red
sayColor.call(window);//red
sayColor.call(o);//blue

1.apply方法

接收两个参数，一个是在函数中运行函数的作用域，另一个是参数数组。

2.call方法

call方法与apply方法相同，区别在于接收参数的方式不同，对于call方法而言，第一个参数是this值没有变化，变化的是其余参数都直接传递给函数。

function fn(){
     console.log(this)//windwow
     function InnerFn(){
          console.log(this)
     }
     InnerFn.call(this)//window
}
fn();

  function fn0(){
     console.log(this)//window
}
function fn1(){
     fn0.call(this);
     console.log(this);//window
}
fn1();

function fn0(){
 console.log(this)//object
}
var o = {
    fn1: function fn1(){
        fn0.call(this);
        console.log(this);//object
    }
}
o.fn1();

bind方法

这个方法会创建一个函数的实例，其this值会被绑定到传给bind()函数的值。也就是说会返回一个新函数，并且使函数内部的this为传入的第一个参数

window.color = "red";
var o = {color : "blue"};
function sayColor(){
    alert(this.color)
}
var objectSayColor = sayColor.bind(o);
objectSayColor();//blue

云服务器 GPU云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86128.html

JavaScript深入浅出

摘要：理解的函数基础要搞好深入浅出原型使用原型模型，虽然这经常被当作缺点提及，但是只要善于运用，其实基于原型的继承模型比传统的类继承还要强大。中文指南基本操作指南二继续熟悉的几对方法，包括，，。商业转载请联系作者获得授权，非商业转载请注明出处。怎样使用 this 因为本人属于伪前端，因此文中只看懂了 8 成左右，希望能够给大家带来帮助....（据说是阿里的前端妹子写的） this 的值到底...

blair 2019-08-21 18:26 评论0 收藏0
JavaScript中的this陷阱的最全收集--没有之一

摘要：提及的精髓，闭包作用域链函数是当之无愧的。博客的标题是中的陷阱的最全收集没有之一，很显然这篇博客阐述的是。这是造成很多不熟悉的人深陷陷阱的根源。你应该避免在构造函数里面返回任何东西，因为这可能代当有人问起你JavaScript有什么特点的时候，你可能立马就想到了单线程、事件驱动、面向对象等一堆词语，但是如果真的让你解释一下这些概念，可能真解释不清楚。有句话这么说：如果你不能向一个6岁...

KitorinZero 2019-08-21 10:28 评论0 收藏0
我对JavaScript中this的一些理解

摘要：匿名函数的执行环境具有全局性，因此它的对象通常指向。如果对此有疑惑，可以看知乎上的答案知乎匿名函数的指向为什么是作为对象方法的调用，指向该对象当函数作为某个对象的方法调用时，就指这个函数所在的对象。因为日常工作中经常使用到this，而且在JavaScript中this的指向问题也很容易让人混淆一部分知识。这段时间翻阅了一些书籍也查阅了网上一些资料然后结合自己的经验，为了能让自...

focusj 2019-08-23 15:23 评论0 收藏0
理解 JavaScript call()/apply()/bind()

摘要：理解文章中已经比较全面的分析了在中的指向问题，用一句话来总结就是的指向一定是在执行时决定的，指向被调用函数的对象。与和直接执行原函数不同的是，返回的是一个新函数。这个新函数包裹了原函数，并且绑定了的指向为传入的。理解 JavaScript this 文章中已经比较全面的分析了 this 在 JavaScript 中的指向问题，用一句话来总结就是：this 的指向一定是在执行时决定的，...

duan199226 2019-08-23 14:27 评论0 收藏0
javascript code style

javascript代码风格来源：https://github.com/airbnb/javascript Objects 对象 javascript// bad var item = new Object(); // good var item = {}; //不要使用保留字作为对象属性，IE8不支持。 // bad var superman = { default: { cla...

objc94 2019-08-21 10:29 评论0 收藏0
理解 JavaScript this

摘要：回调函数在回调函数中的指向也会发生变化。在闭包回调函数赋值等场景下我们都可以利用来改变的指向，以达到我们的预期。文章参考系列文章理解闭包理解执行栈理解作用域理解数据类型与变量原文发布在我的公众号，点击查看。这是本系列的第 5 篇文章。还记得上一篇文章中的闭包吗？点击查看文章理解 JavaScript 闭包。在聊 this 之前，先来复习一下闭包： var name = Nei...

zombieda 2019-08-23 14:10 评论0 收藏0