资讯专栏INFORMATION COLUMN

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

wslongchen / 1954人阅读

摘要:原型链理解第一件事你不用管其他语言,一句话,你只要记住里面的对象包含一个原型,原型是啥,就是另外一个对象。原型就相当于你家的车棚子,而你的那个自行车就是对象。万事万物皆对象有啥用一句话,扩展原型方法,给大家一到面试题,数组去重自己体会下。

概述

通过上节课的学习,大家已经会用一种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

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

上代码:

Array.prototype.indexOf=function(item){
    for(var i=0;i

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

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

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

相关文章

  • 体验javascript之美6:如果你觉得什么都会了或者不知道js学什么了看这里-面向对象编程

    摘要:面向过程函数式编程面向对象编程第二个并不是大家理解的那样,我们先说举个现实例子就明白了。多说一句函数是编程是非常强大也是我最喜欢的,以后再说,我们先说面向对象编程。 概述 当大家已经把js的语言基础理解了,然后能够写出一些简单的例子了,这个时候基本上达到了一年工作经验的水平,而自己能够独立的写一些小功能,完成一些小效果,或者临摹修改一些比较复杂的插件的时候差不多就是两年工作经验的水平,...

    changfeng1050 评论0 收藏0
  • 体验js之美第八课-面向对象创建和继承终结篇

    摘要:概述到这里我们讲说面向对象的系列部分的最后一个课程,面向对象必须掌握两个东西一个是对象的创建一个是继承。只需要记住一句话,属性放在构造函数里面,方法放在原型上。 概述 到这里我们讲说js面向对象的系列部分的最后一个课程,面向对象必须掌握两个东西一个是对象的创建一个是继承。这节课我们重点说说这两个问题最后我们说下在ES6里面面向对象怎么玩。 1对象的创建 我们第一节课已经就会用了,单体模...

    jzzlee 评论0 收藏0
  • 理解原型链和原型继承

    摘要:原型链和构造函数是一种面向对象的语言,并且可以进行原型继承。来了极大的支持了工程化,它的标准让浏览器内部实现类和类的继承构造函数构造函数调用父类构造函数现在浏览器对其支持程度还不高。 原型链 原型链比作用域链要好理解的多。 JavaScript中的每个对象,都有一个内置的_proto_属性。这个属性是编程不可见的(虽然ES6标准中开放了这个属性,然而浏览器对这个属性的可见性的支持不同)...

    XboxYan 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<