体验javascript之美第七课 明白原型链和扩大原型要领

2024年1月27日 221次阅读 来源: 前端大彬哥

概述

经由过程上节课的进修，人人已会用一种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关键字那些吗？宁神，这些下节课就讲了。

    原文作者：前端大彬哥
    原文地址: https://segmentfault.com/a/1190000009173259
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞