做个JS面向对象的笔记

GitCafe 发布于2019-08-21 17:45 / 2863人阅读

摘要：组合构造原型模式将自身属性于构造函数中定义，公用的方法绑定至原型对象上原型对象的解释每一个函数创建时本身内部会有一个固有的原型对象，可以通过函数名去访问，而其原型对象又有一个属性指针指向该函数。

每次遇到JS面对对象这个概念，关于继承及原型，脑海里大概有个知识框架，但是很不系统化，复习下，将其系统化，内容涉及到对象的创建，原型链，以及继承。

创建对象

两种常用方式，其余的比较少见
工厂模式:

    function createObject(){
        var o = {}
        o.name = "Nico"
        o.age = 8
        o.sayName = function(){
            alert(this.name)
        }
        return o
    }

这种方式比较不开门见山，比较直接的事第二种，构造函数方式

    function Object(name, age){
        this.name = name
        this.age = age
        this.sayName = function(){
            alert(this.name)
        }
    }

通常使用第二种，比较直观
考虑到函数也是对象的一种，每次对象的实例化中其方法也会跟随着实例化一次，为了解决这个问题，因此出现了组合构造原型模式，这是最常用的一种方式。

组合构造原型模式

     function Object(name, age){
        this.name = name
        this.age = age
    }
    
    Object.prototype.sayName = function(){
        alert(this.name)
    }

将自身属性于构造函数中定义，公用的方法绑定至原型对象上

原型对象的解释
每一个函数创建时本身内部会有一个固有的原型对象，可以通过函数名.prototype 去访问，而其原型对象又有一个属性constructor指针指向该函数。
假设有一个构造函数

   function Person(){
        this.name = "Nicholas"
        this.age = 29
        this.job = "Software Engineer"
    }
    
    Person.prototype.sayName = function(){
        alert(this.name)
    }
    var person1 = new Person()
    var person12 = new Person()

其原型对象、构造函数、实例之间的关系如下

构造函数可以通过Person.prototype来访问原型对象，但是实例是没有办法来访问原型对象的，但是在Firefox、Chrome、Safari的每一个实例对象都有一个_proto_的属性进行访问其原型

继承

原型链：
根据以上的原型关系可以发现，实例先从自身定义的属性及方法中取值，若无法寻找到，则向上一级即原型对象访问需要的属性及方法，若其原型对象是另一个对象的实例，仍无法访问到属性与方法的话，再继续向该实例的原型对象访问，这样就构成了一个原型链，也是继承的实现方式。

有如下两个对象

    function SuperType(){
            this.property = true
        }

        SuperType.prototype.getSuperValue = function(){
            return this.property
        }

        function SubType(){
            this.subproperty = false
        }

        SubType.prototype = new SuperType()

        SubType.prototype.getSubValue = function(){
            return this.subproperty
        }

        var instance = new SubType()

        alert(instance.getSubValue()) // false

这是一个简单的继承实现方式，子类SubType具有了父类的property属性，同时也具有getSubValue的方法。
其原型链如下:

但是这样做会将父类的属性绑定至子类的原型上，如果父类具有按引用访问的数据时，子类的某一个实例中该数据的变化会导致所有子类实例该数据的变化，因此改进为借用构造函数模式的继承

        function SubType(){
            SuperType.call(this)
            this.subproperty = false
        }

这样就解决了该问题，将property属性定义在了子类构造函数上，子类实例访问时先从该本身构造函数具有的属性中进行访问，且进行操作，相当于覆盖了原型上的该同名属性。

但是上述的方法又出现了一个别的问题，该问题也比较容易解决，比较少用到，笔记先到这，后续笔记将记录该问题及解决办法

GPU云服务器云服务器 js 面向对象视频 oop面向对象 js js面向对象开发表格 php的面向对象

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

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

回顾自己三次失败的面试经历

摘要：站在这个时间点上，我对自己之前三次失败的面试经历做了一次深度回顾。关于我第三次面试失败的经历，依然是与轮播图有关。当然，这次思特奇面试之旅，最后也是以失败告终，这也是我离进大厂最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言时间的齿轮已经来到了2017年的11月份，距离2018年仅仅还剩下不到两...

DC_er 2019-08-21 17:42 评论0 收藏0
回顾自己三次失败的面试经历

摘要：站在这个时间点上，我对自己之前三次失败的面试经历做了一次深度回顾。关于我第三次面试失败的经历，依然是与轮播图有关。当然，这次思特奇面试之旅，最后也是以失败告终，这也是我离进大厂最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言时间的齿轮已经来到了2017年的11月份，距离2018年仅仅还剩下不到两...

spacewander 2019-08-29 13:50 评论0 收藏0
【笔记】JavaScript高级篇——面向对象、原型、继承

摘要：继承传统的面向对象语言，继承是类与类之间的关系。原型继承原型定义原型就是指构造函数的属性所引用的对象。创建构造函数创建的实例对象张三李四就是对象的原型也是的原型在原型上创建一个属性运行和，并对比是否为同一个方法。原文链接：http://www.hansmkiii.com/2018/07/06/javascript-node-1/ 面向对象、原型、继承 1、面向对象 1.1 什么...

OBKoro1 2019-08-22 18:39 评论0 收藏0