javascript的this对象

roundstones 发布于2019-08-22 10:41 / 630人阅读

摘要：的使用环境分以下几种情况普通函数调用作为构造函数调用作为对象的方法来调用方法的调用普通函数调用单纯函数调用属于全局调用，指向指向对象，在浏览器着就是对象。

我们知道，this对象是在运行时基于执行函数的执行环境绑定：在全局函数中，this等于window，而当函数被当做某个对象的方法调用时，this等于那个对象。

this的使用环境分以下几种情况：

普通函数调用

作为构造函数调用

作为对象的方法来调用

call/apply/bind方法的调用

普通函数调用

单纯函数调用属于全局调用，this指向this指向Global对象，在浏览器着就是window对象。

var name = "the window";
function fn(){
    alert(this.name);
}
fn();    //the window

这个例子很好理解。在全局作用域中声明的变量、函数，都会变成window对象的属性、方法，this指向window

var length = 10
function fn(){
    alert(this.length)
}
var obj = {
    length: 5,
    method: function(fn) {
        fn() // ?
        arguments[0]() // ?
    }
}
obj.method(fn)      //10  1

这个例子就不太好理解了。这里fn依然是单纯的函数调用，我们知道，每个函数在被调用时，都会自动取得两个特殊变量：this和arguments。内部函数搜索这两个变量时，只会搜索到其活动对象为止。所以这里fn中的this指向window。
另外要注意arguments是一个对象，对象属于除了点操作符还可以用中括号，arguments[0]()其实是fn作为arguments对象的方法被调用，this指向arguments，因为参数只有一个fn，因此length为1

var length = 10
var obj = {
    length: 5,
    method: function() {
        function fn(){
            alert(this.length)
        }
        fn();
    }
}
obj.method()     //10

再稍微变换一下代码，this依然指向window

作为对象的方法调用

函数被作为某个方法时，this等于那个对象

var length = 10
function fn(){
    alert(this.length)
}
var obj = {
    length: 5,
    method: fn
}
obj.method()      //5

再换一个例子

function fn(){
    alert(this.length)
}
var obj1 = {
    length: 5,
    method: fn
}
var obj2 = {
    length: 6,
    method: obj1.method
}
obj2.method()      //6

作为构造函数调用

通过new操作符来调用函数，创建一个新的对象，将构造函数的作用域赋予给新对象，因此this指向这个新对象。

var name = "windowName";
function fn(name){
    this.name = name;
    this,sayName = function(){
        alert(this.name);
    }
}
fn("fnName");     //fnName

call/apply/bind方法的调用

这三个方法都是通过传递参数改变函数体内的this。call和apply方法的作用相同，函数体内的this指向的第一个参数。

var name = "window";
var o = {
    name: "object"
};

function fn(){
    alert(this.name)
}

fn.call(this);  //window
fn.call(window);  //window
fn.call(o);       //object

var obj1 = {
    n1:"n1",
    n2:"n2"
};
var obj2 = {
    n1:"nn1",
    n2:"nn2",
    fn:function(x,y){
        this.n1 = x;
        this.n2 = y;
    }
};
obj2.fn.call(obj1,"new1","new2");
console.log(obj1.n1);  //  new1
console.log(obj1.n2);  //  new2
console.log(obj2.n1);  //  nn1
console.log(obj2.n2);  //  nn2

bind方法会创建一个函数的实例，其this值会被绑定到传给bind()函数的值

var obj1 = {
    n1:"n1",
    n2:"n2"
};
var obj2 = {
    n1:"nn1",
    n2:"nn2",
    fn:function(x,y){
        this.n1 = x;
        this.n2 = y;
    }
};
var obj = obj2.fn.bind(obj1);
obj("new1","new2");
console.log(obj1.n1);  //  new1
console.log(obj1.n2);  //  new2
console.log(obj2.n1);  //  nn1
console.log(obj2.n2);  //  nn2

参考资料

坑爹的js笔试题

JS中的this关键字详解

关注作者吧~

云服务器 GPU云服务器 javascript的this 对象名this javaScript中的this javascript中this详解

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

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

JavaScript深入浅出

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

blair 2019-08-21 18:26 评论0 收藏0
javascript技术难点（三）之this、new、apply和call详解

摘要：第四点也要着重讲下，记住构造函数被操作，要让正常作用最好不能在构造函数里 4) this、new、call和apply的相关问题讲解this指针的原理是个很复杂的问题，如果我们从javascript里this的实现机制来说明this，很多朋友可能会越来越糊涂，因此本篇打算换一个思路从应用的角度来讲解this指针，从这个角度理解this指针更加有现实意义。下面我们看看在ja...

ghnor 2019-08-21 10:27 评论0 收藏0
JavaScript中的面向对象（object-oriented）编程

摘要：对象在中，除了数字字符串布尔值这几个简单类型外，其他的都是对象。那么在函数对象中，这两个属性的有什么区别呢表示该函数对象的原型表示使用来执行该函数时这种函数一般成为构造函数，后面会讲解，新创建的对象的原型。这时的函数通常称为构造函数。。本文原发于我的个人博客，经多次修改后发到sf上。本文仍在不断修改中，最新版请访问个人博客。最近工作一直在用nodejs做开发，有了nodejs，...

JerryZou 2019-08-21 10:26 评论0 收藏0
Javascript 深入浅出This

摘要：中函数的调用有以下几种方式作为对象方法调用，作为函数调用，作为构造函数调用，和使用或调用。作为构造函数调用中的构造函数也很特殊，构造函数，其实就是通过这个函数生成一个新对象，这时候的就会指向这个新对象如果不使用调用，则和普通函数一样。 this 是 JavaScript 比较特殊的关键字，本文将深入浅出的分析其在不同情况下的含义，可以这样说，正确掌握了 JavaScript 中的 th...

Y3G 2019-08-22 10:48 评论0 收藏0
JavaScript进阶之’this‘

摘要：所以相同点是，在全局范围内，全局变量终究是属于老大的。只生效一次引入了。只生效一次在箭头函数中，与封闭词法环境的保持一致。我通常把这些原始函数叫做构造函数。在里面你可以嵌套函数，也就是你可以在函数里面定义函数。 showImg(https://img-blog.csdnimg.cn/20190522000008399.jpg?x-oss-process=image/watermark,...

shenhualong 2019-08-23 18:37 评论0 收藏0
JavaScript 工厂函数 vs 构造函数

摘要：当谈到语言与其他编程语言相比时，你可能会听到一些令人困惑东西，其中之一是工厂函数和构造函数。好的，让我们用构造函数做同样的实验。当我们使用工厂函数创建对象时，它的指向，而当从构造函数创建对象时，它指向它的构造函数原型对象。 showImg(https://segmentfault.com/img/bVbr58T?w=1600&h=900); 当谈到JavaScript语言与其他编程语言...

RayKr 2019-08-23 17:17 评论0 收藏0