体验javascript之美第七课 理解原型链和扩展原型方法

概述

通过上节课的学习，大家已经会用一种json的方式定义对象了，其实这个就是传说中的单体模式，当然这个大家不用记，关于设计模式暂时不用了解。但是总感觉哪里跟你平常用的或者听到的不一样吧，比如好像js听说有什么原型继承，还有它的对象好像跟传统的js对象不一样什么的。好，今天我就让你彻底明白里面的花花草草。

1.原型链理解

第一件事你不用管其他语言，一句话，你只要记住js里面的对象包含一个原型，原型是啥，就是另外一个对象。

举个例子：

你每天骑着自行车去上学，然后你车子坏了咋弄，要么去自己家的车棚子里推一辆继续骑，要么从车棚子里找到工具修修。

原型就相当于你家的车棚子，而你的那个自行车就是对象。

自行车上的书包是你人为加上去的，而螺丝刀、和轮胎有些是你自行车必须有的东西，有些是修理你自行车的东西。好，我们回到代码表示一下。

            var bike = {
                车筐:"书包"
            };
            console.log(bike);//Object {车筐: "书包"}
            //怎么看车棚子，也就是原型，里面放着各种方法和属性
            console.log(bike.__proto__)

记住，这个车棚里面有各种工具和零件，很拽，还能生产自行车。理解到这个程度就行了，有一天你放学回家了到家发现你的书包不见了，你怎么办，肯定是先看看自己的车子上有么有，没有咋弄，去车棚找，车棚子没有，车棚子很拽，上面还有个生产车棚子的__proto_proto逐层向上查找就是原型链查找。如图。

图片描述

2.原型的用途

​ 我知道这个有什么用？好我们看一个实际的情况，https://docs.angularjs.org/ap...

​ angular的merge函数，简单的说，有一个对象a,还有一个对象b，我想把两个对象合并成一个对象怎么实现？注意要求只是合并人加的，原型上的不算。

​ 直接上源码，简单的让人发指，这个就是angular的架构（1.6.2）我粗糙的实现了一下。

        (function(window) {
            var angular = window.angular || (window.angular = {});
            angular.merge=function(dst,src){
                for(var prop in src){
                    if(src.hasOwnProperty(prop)){

                        dst[prop] =src[prop];
                    }
                }
                return dst;  
            }
        })(window);

        var person = {
            name:"leo",
            age:18
        };
        var person2 = {
            job:"教前端的"
        };
        console.log(angular.merge(person,person2));
       // https://docs.angularjs.org/api/ng/function/angular.merge

hasOwnProperty这个用来判断只是自己直接添加的对象，现在知道用途了吧？理解了js原理，能看懂和实现angular的库，你还发愁自己不会用angular吗？

2.万事万物皆对象

​ 经常听人说，js万事万物皆对象

​ 怎么证明，不墨迹上代码

​

        var num = 12;
        console.log(num.__proto__);
        var str = 'abc';
        console.log(str.__proto__);
        var arr = [];
        console.log(arr.__proto__.__proto__);
        var json = {};
        console.log(json.__proto__.__proto__);

不解释，一句话，所有对象都有一个祖宗对象Object。

3.万事万物皆对象有啥用？

​ 一句话，扩展原型方法，给大家一到面试题，数组去重自己体会下。

思路，判断某个值出现的位置是否等于当前循环的i,
比如,
    arr[1]的下标是1，而arr.indexOf(arr[1])返回是0 说明 1在 i = 1的位置之前出现过了，所以重复。上代码：

    var arr = [1,1,12,5,8,7,8,7,21,5,0,0];
    var arr2 = [];
    for(var i = 0;i<arr.length;i++){
        console.log(arr.indexOf(arr[i]),i);
        if(arr.indexOf(arr[i])===i){
            arr2.push(arr[i]);
        }
    }
    document.write(arr2);
 ------------------------------------------------------------------------------------------------------------------------------------
直接说缺点：
    数组indexOf方法并不支持IE8及其以下浏览器，要想兼容还得单独处理，麻烦。

那么问题就来了 如何实现让indexOf方法兼容低版本浏览器，这里就体现万事万物皆对象的好处了。

上代码：

Array.prototype.indexOf=function(item){
    for(var i=0;i<this.length;i++){
        if(this[i]==item){
            return i;
        }
    }
    return -1;
};

有同学可能会想，不对啊，我们不讲new关键字那些吗？放心，这些下节课就讲了。