这一章我们将会重点介绍JavaScript中几个重要的属性(this、constructor、prototype), 这些属性对于我们理解如何实现JavaScript中的类和继承起着至关重要的作用。

this

this表示当前对象,如果在全局作用范围内使用this,则指代当前页面对象window; 如果在函数中使用this,则this指代什么是根据运行时此函数在什么对象上被调用。 我们还可以使用apply和call两个全局方法来改变函数中this的具体指向。

先看一个在全局作用范围内使用this的例子:

        <script type="text/javascript">
            console.log(this === window);  // true
            console.log(window.alert === this.alert);  // true
            console.log(this.parseInt("021", 10));  // 10
        </script>
        

函数中的this是在运行时决定的,而不是函数定义时,如下:

        // 定义一个全局函数
        function foo() {
            console.log(this.fruit);
        }
        // 定义一个全局变量,等价于window.fruit = "apple";
        var fruit = "apple";
        // 此时函数foo中this指向window对象
        // 这种调用方式和window.foo();是完全等价的
        foo();  // "apple"

        // 自定义一个对象,并将此对象的属性foo指向全局函数foo
        var pack = {
            fruit: "orange",
            foo: foo
        };
        // 此时函数foo中this指向window.pack对象
        pack.foo(); // "orange"
        

全局函数apply和call可以用来改变函数中this的指向,如下:

        // 定义一个全局函数
        function foo() {
            console.log(this.fruit);
        }

        // 定义一个全局变量
        var fruit = "apple";
        // 自定义一个对象
        var pack = {
            fruit: "orange"
        };

        // 等价于window.foo();
        foo.apply(window);  // "apple"
        // 此时foo中的this === pack
        foo.apply(pack);    // "orange"
        

注:apply和call两个函数的作用相同,唯一的区别是两个函数的参数定义不同。

因为在JavaScript中函数也是对象,所以我们可以看到如下有趣的例子:

        // 定义一个全局函数
        function foo() {
            if (this === window) {
                console.log("this is window.");
            }
        }

        // 函数foo也是对象,所以可以定义foo的属性boo为一个函数
        foo.boo = function() {
            if (this === foo) {
                console.log("this is foo.");
            } else if (this === window) {
                console.log("this is window.");
            }
        };
        // 等价于window.foo();
        foo();  // this is window.

        // 可以看到函数中this的指向调用函数的对象
        foo.boo();  // this is foo.

        // 使用apply改变函数中this的指向
        foo.boo.apply(window);  // this is window.
        

prototype

我们已经在第一章中使用prototype模拟类和继承的实现。 prototype本质上还是一个JavaScript对象。 并且每个函数都有一个默认的prototype属性。 
如果这个函数被用在创建自定义对象的场景中,我们称这个函数为构造函数。 比如下面一个简单的场景:

        // 构造函数
        function Person(name) {
            this.name = name;
        }
        // 定义Person的原型,原型中的属性可以被自定义对象引用
        Person.prototype = {
            getName: function() {
                return this.name;
            }
        }
        var zhang = new Person("ZhangSan");
        console.log(zhang.getName());   // "ZhangSan"
        

作为类比,我们考虑下JavaScript中的数据类型 - 字符串(String)、数字(Number)、数组(Array)、对象(Object)、日期(Date)等。 我们有理由相信,在JavaScript内部这些类型都是作为构造函数来实现的,比如:

        // 定义数组的构造函数,作为JavaScript的一种预定义类型
        function Array() {
            // ...
        }

        // 初始化数组的实例
        var arr1 = new Array(1, 56, 34, 12);
        // 但是,我们更倾向于如下的语法定义:
        var arr2 = [1, 56, 34, 12];
        

同时对数组操作的很多方法(比如concat、join、push)应该也是在prototype属性中定义的。 
实际上,JavaScript所有的固有数据类型都具有只读的prototype属性(这是可以理解的:因为如果修改了这些类型的prototype属性,则哪些预定义的方法就消失了), 但是我们可以向其中添加自己的扩展方法。

        // 向JavaScript固有类型Array扩展一个获取最小值的方法
        Array.prototype.min = function() {
            var min = this[0];
            for (var i = 1; i < this.length; i++) {
                if (this[i] < min) {
                    min = this[i];
                }
            }
            return min;
        };

        // 在任意Array的实例上调用min方法
        console.log([1, 56, 34, 12].min());  // 1
        

注意:这里有一个陷阱,向Array的原型中添加扩展方法后,当使用for-in循环数组时,这个扩展方法也会被循环出来。 
下面的代码说明这一点(假设已经向Array的原型中扩展了min方法):

        var arr = [1, 56, 34, 12];
        var total = 0;
        for (var i in arr) {
            total += parseInt(arr[i], 10);
        }
        console.log(total);   // NaN

解决方法也很简单:

        var arr = [1, 56, 34, 12];
        var total = 0;
        for (var i in arr) {
            if (arr.hasOwnProperty(i)) {
                total += parseInt(arr[i], 10);
            }
        }
        console.log(total);   // 103
        

constructor

constructor始终指向创建当前对象的构造函数。比如下面例子:

        // 等价于 var foo = new Array(1, 56, 34, 12);
        var arr = [1, 56, 34, 12];
        console.log(arr.constructor === Array); // true
        // 等价于 var foo = new Function();
        var Foo = function() { };
        console.log(Foo.constructor === Function); // true
        // 由构造函数实例化一个obj对象
        var obj = new Foo();
        console.log(obj.constructor === Foo); // true

        // 将上面两段代码合起来,就得到下面的结论
        console.log(obj.constructor.constructor === Function); // true
        

但是当constructor遇到prototype时,有趣的事情就发生了。 
我们知道每个函数都有一个默认的属性prototype,而这个prototype的constructor默认指向这个函数。如下例所示:

        function Person(name) {
            this.name = name;
        };
        Person.prototype.getName = function() {
            return this.name;
        };
        var p = new Person("ZhangSan");

        console.log(p.constructor === Person);  // true
        console.log(Person.prototype.constructor === Person); // true
        // 将上两行代码合并就得到如下结果
        console.log(p.constructor.prototype.constructor === Person); // true
        

当时当我们重新定义函数的prototype时(注意:和上例的区别,这里不是修改而是覆盖), constructor的行为就有点奇怪了,如下示例:

        function Person(name) {
            this.name = name;
        };
        Person.prototype = {
            getName: function() {
                return this.name;
            }
        };
        var p = new Person("ZhangSan");
        console.log(p.constructor === Person);  // false
        console.log(Person.prototype.constructor === Person); // false
        console.log(p.constructor.prototype.constructor === Person); // false
        

为什么呢? 
原来是因为覆盖Person.prototype时,等价于进行如下代码操作:

        Person.prototype = new Object({
            getName: function() {
                return this.name;
            }
        });
        

而constructor始终指向创建自身的构造函数,所以此时Person.prototype.constructor === Object,即是:

        function Person(name) {
            this.name = name;
        };
        Person.prototype = {
            getName: function() {
                return this.name;
            }
        };
        var p = new Person("ZhangSan");
        console.log(p.constructor === Object);  // true
        console.log(Person.prototype.constructor === Object); // true
        console.log(p.constructor.prototype.constructor === Object); // true
        

怎么修正这种问题呢?方法也很简单,重新覆盖Person.prototype.constructor即可:

        function Person(name) {
            this.name = name;
        };
        Person.prototype = new Object({
            getName: function() {
                return this.name;
            }
        });
        Person.prototype.constructor = Person;
        var p = new Person("ZhangSan");
        console.log(p.constructor === Person);  // true
        console.log(Person.prototype.constructor === Person); // true
        console.log(p.constructor.prototype.constructor === Person); // true
        

下一章我们将会对第一章提到的Person-Employee类和继承的实现进行完善。

【转载】JavaScript继承详解(二)的更多相关文章

  1. [原创]JavaScript继承详解

    原文链接:http://www.cnblogs.com/sanshi/archive/2009/07/08/1519036.html 面向对象与基于对象 几乎每个开发人员都有面向对象语言(比如C++. ...

  2. JavaScript继承详解

    面向对象与基于对象 在传统面向对象的语言中,有两个非常重要的概念 - 类和实例. 类定义了一类事物公共的行为和方法:而实例则是类的一个具体实现. 我们还知道,面向对象编程有三个重要的概念 - 封装.继 ...

  3. JavaScript继承详解(五)

    在本章中,我们将分析John Resig关于JavaScript继承的一个实现 - Simple JavaScript Inheritance. John Resig作为jQuery的创始人而声名在外 ...

  4. JavaScript继承详解(四)

    在本章中,我们将分析Douglas Crockford关于JavaScript继承的一个实现 - Classical Inheritance in JavaScript. Crockford是Java ...

  5. JavaScript继承详解(一)

    面向对象与基于对象 几乎每个开发人员都有面向对象语言(比如C++.C#.Java)的开发经验. 在传统面向对象的语言中,有两个非常重要的概念 - 类和实例. 类定义了一类事物公共的行为和方法:而实例则 ...

  6. 【转载】JavaScript继承详解一

    面向对象与基于对象 几乎每个开发人员都有面向对象语言(比如C++.C#.Java)的开发经验. 在传统面向对象的语言中,有两个非常重要的概念 - 类和实例. 类定义了一类事物公共的行为和方法:而实例则 ...

  7. JavaScript继承详解(二)

    这一章我们将会重点介绍JavaScript中几个重要的属性(this.constructor.prototype), 这些属性对于我们理解如何实现JavaScript中的类和继承起着至关重要的作用. ...

  8. JavaScript继承详解(三)

    在第一章中,我们使用构造函数和原型的方式在JavaScript的世界中实现了类和继承, 但是存在很多问题.这一章我们将会逐一分析这些问题,并给出解决方案. 注:本章中的jClass的实现参考了Simp ...

  9. javascript继承详解(待续)

    常见继承分两种,一种接口继承,继承方法签名:一种实现继承,继承实际方法.js只支持后一种. 1原型链 首先看原型.构造函数.实例的关系.如果我们让一个函数的原型对象等于另一个的实例,然后另一个的原型对 ...

随机推荐

  1. Hello Spring Framework——源(Resources)

    本文介绍Spring框架如何解析外部资源文件,仅参考官方文档<第7章 Resources>. ***************************以下是正文的部分************ ...

  2. CareerCup All in One 题目汇总 (未完待续...)

    Chapter 1. Arrays and Strings 1.1 Unique Characters of a String 1.2 Reverse String 1.3 Permutation S ...

  3. WPF MVVM模式下实现ListView下拉显示更多内容

    在手机App中,如果有一个展示信息的列表,通常会展示很少一部分,当用户滑动到列表底部时,再加载更多内容.这样有两个好处,提高程序性能,减少网络流量.这篇博客中,将介绍如何在WPF ListView中实 ...

  4. java实现 swing模仿金山打字 案例源码

    java实现 swing模仿金山打字 案例源码,更多Java技术就去Java教程网.http://java.662p.com 代码: <font size="3">im ...

  5. 【转】10 个迅速提升你 Git 水平的提示

    最近我们推出了两个教程:熟悉Git的基本功能和让你在开发团队中熟练的使用Git . 我们所讨论的命令足够一个开发者在Git使用方面游刃有余.在这篇文章中,我们试图探索怎样有效的管理你的时间和充分的使用 ...

  6. Loading Image

    Android doesn’t handle animated gifs, but here’s one way to display an animated loading image that i ...

  7. ios UIKit动力 分类: ios技术 2015-07-14 12:55 196人阅读 评论(0) 收藏

    UIkit动力学是UIkit框架中模拟真实世界的一些特性. UIDynamicAnimator 主要有UIDynamicAnimator类,通过这个类中的不同行为来实现一些动态特性. 它一般有两种初始 ...

  8. Linux的正则表达式grep,egrep

    一.概念 正则表达式是对字符串操作的一种逻辑公式,用事先定义好的一组特殊字符,组成一个"规则字符集合",根据用户指定的文本模式对目标文件进行逐行搜索匹配,显示能被模式匹配到的结果. ...

  9. bzoj1934

    1934: [Shoi2007]Vote 善意的投票 Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 2406  Solved: 1498[Submit][ ...

  10. 分布式逻辑管理平台XXL-GLUE

    <分布式逻辑管理平台XXL-GLUE>    一.简介 1.1 概述 XXL-GLUE 是一个分布式环境下的 "可执行逻辑单元" 管理平台, 学习简单,扩展JVM的动态 ...