javascript面向对象之this用法举例

发布时间:2020-08-30编辑:脚本学堂
本文介绍下javascript面向对象编程中this的用法示例,javascript函数中的this对象和其他语言比较起来很很大不同,建议大家看看本文给出的介绍,会有所帮助的。

javascript中this对象是有函数的调用对象决定。
执行过程中,this对象不能被修改。
ECMAScript 5引入了bind方法来设置调用中的this对象,实际上就是传递上下文,很多框架都已经实现了。

还是通过具体的例子,加以讲解吧,这样便于理解,纯理论的东西,乏陈无味。
例1,

复制代码 代码示例:

<script>
function fn(){
    return this;
}

alert(fn() === window);  //true
</script>

以上的例子中,结果和原因都比较明显,fn()相当于全局对象window在调用,等同于window.fn(),因而this对象指向window对象。

例2,

复制代码 代码示例:
<script>
var x = 0;
function fn(){
    alert(this.x);
}
var obj = {
    x: 1,
    f: fn,
}
obj.f();  //1
</script>

注意:obj对象的f属性指向fn函数体,所以最后的obj.f()调用,就是对象obj在调用函数,因此套用规则,this.x显示1。

例3,

复制代码 代码示例:
<script>
var x = 0;
function test(){
    return function(){
        console.log(this.x);
    };
}
var o = {x:1};
o.f = test;
o.f()();  //0
</script>

这个例子,最终显示结果为0,这是为何呢?通俗点讲,对象o的属性f是test函数的引用,o.f()得到的结果是function(){console.log(this.x);},单独执行这个函数,this对象当然指向全局对象window,因而结果为0。这里就简单地理解this对象,不要去看太复杂的例子,记住:万变不离其宗,this对象指向调用包裹它本身的函数的对象。

注意:使用一个变量保存this对象,可以改变上下文。柯里化的函数绑定是比较典型的传递上下文技术。

总结下this的处理机制分为五种不同的情况:
①、全局范围,指向全局对象;
②、函数直接调用,同样指向全局对象,例如:func();    -- ES5严格模式下,会是undefined,因为不存在全局变量
③、方法调用,指向调用方法的对象,例如:fn.func(); this指向fn对象;
④、调用构造函数,例如:new func();这里this指向新创建的对象;
⑤、传递上下文,例如:apply(context, args)或者call(context, arg1, arg2...),this指向context

另一种特别容易误解地方:
示例1,

复制代码 代码示例:
Fn.method = function() {
    function func() {
        // this 将会被设置为全局对象
    }
    func();
}

大多数初学者很容易误解,代码当中的this指向Fn对象,其实指向window全局对象;若真需要使用Fn对象,可以在method方法内创建一个变量来引用Fn对象。
示例2,

复制代码 代码示例:
Fn.method = function() {
    var self= this;
    function func() {
        // 使用 self来指向 Fn 对象
    }
    func();
}

有了以上的介绍,大家应该都能很好地理解this对象的工作机制了。
有兴趣的朋友,还可以参阅下这篇文章:javascript面向对象编程之this详解

您可能感兴趣的文章:
JavaScript面向对象编程(入门参考)
理解JavaScript中的面向对象
深入解析 Javascript 面向对象编程
JavaScript 面向对象的原型与实例分析
JavaScript面向对象的一个例子
JavaScript 面向对象(OOP)的语法参考
javascript面向对象编程之this详解
javascipt面向对象扩展的例子
javascipt面向对象之成员函数实例
javasrcipt 面向对象编程的例子