js 对象创建及其继承的方法

   重新看红皮书,觉得很多知识多看几遍确实是能看的更明白些。今天重温了一下对象创建和继承,就稍微记下来,巩固一下。

   js是面向对象的编程语言,ECMA-262吧对象定义为:“无序属性的集合,其属性可以包含基本值,对象或者函数”。每个对象都是基于一个引用类型创建的,这个引用类型可以是原生类型,也可以是自定义的。

    一,讲讲创建对象的几个方法

      1. var person = new Object();

      2. var person = {};

      3. 工厂模式

      4. 构造函数模式

      5. 原型模式

      6. 组合使用构造函数模式和冤案型模式

      7. 动态原型模式

      8.等等......

     这里着重记一下构造模式和原型模式,毕竟之后的模式和继承方法都是由于这两个的优缺点借鉴而来。

     4.构造函数模式     

        function Person(name,age,job){
          this.name = name;
          this.age = age;
          this.job = job;
          this.sayName = function(){
            console.log(this.name);
          };
        }
        var person1 = new Person(‘niko‘,‘19‘,‘FE‘);

        这种方式创建对象,可以将它的实例化标识为一中特定类型。及实例可以通过 instanceof 或者constructor 来检测对象的类型。缺点是无法完成方法的复用,即每个方法都需要在实例化上重新创建。

      5.原型模式

        我们自然是希望创建对象时可以共享某些属性和方法,搞这个原型模式挺拿手的~~~来露个脸。简单的说,我们创建的每个函数都有一个prototype属性,这个prototype属性是一个指针,指向一个对象,这个对象里面放着创建的这个对象实例的原型对象。原型对象,即是包含所有实例都共享的属性和方法。默认情况下,所有原型对象都自动获得一个constructor属性,这个属性包含一个指向prototype属性所在函数的指针。绕来绕去估计就晕了,来个图解释一下。

    

   通过原型模式创建对象之后,是可以顺顺利利的完成属性和方法的共享,但是也是有弊端的如果包含引用类型的值,那么实例化的某一个对象对这个值进行操作,就会修改原型里的值,这样问题就比较麻烦了。所以组合模式就出现了,及用构造函数来创建属性,用原型模式来创建共享方法。

    7.动态原型模式,就是把所有信息封装到函数里看着会简洁好多,也是组合了构造函数和原型模式的优点,在函数内部初始化原型(仅仅在第一次运行时初始化)。

      

      function Person(name,age,job){
        this.name = name;
        this.age = age;
        this.job = job;
        if(typeof this.sayName!= "function"){
          Person.prototype.sayName = function(){
          console.log(this.name);
          };
        }

      }
      var person1 = new Person(‘niko‘,‘19‘,‘FE‘);

      跟组合模式不同的是,初始化原型在函数内部,并且如果有多个共享函数时,只判断一个就好~~看着简洁那么一小丢~~对象创建就写到这,接下来写一下继承啦啦啦啦~

  二,常见的继承方式

    1.原型链

    2.借用构造函数

    3.组合继承

    4.组合寄生式继承

    5.原型式,寄生式..

    挑几个重要的讲吧,重要的就是掌握原型链的原理,以及构造函数继承方式,组合是采取了这两个优缺点进行优化,组合寄生则是针对组合继承进行的优化。原型、寄生式是对一个相对的对象来创建另一个,没怎么碰到就不讲了。

    1.原型链

      原型链的主要思想就是让一个引用类型继承另一个引用类型的实例。原型对象将包含一个指向另一个原型的指针,另一个原型中也包含指向另一个构造函数的指针。层层递进之后,形成原型链。

      

    function SuperType(){
      this.property = true;
    }
    SuperType.prototype.getSuperValue = function(){
      return this.property;
    };
    function Subtype(){
      this.subproperty = false;
    }
    Subtype.prototype.getSubValue = function(){
      return this.subproperty;
    }
    Subtype.prototype.getSubValue = function(){
      return this.subproperty;
    };
    var instance = new Subtype();

      

    啊,写到一半突然要闭馆了闭馆了闭馆了=.=泪奔一下 ,中间详细就不解释了,看懂这个图就没啥大问题了~原型链的问题就是,共享引用类型值的时候,修改一个实例就会修改原型。

   2.借用构造函数

    这个方法就是在子类构造函数中调用超类的构造函数。

  

    function SuperType(name){
      this.name = name;
    }
    function SubType(){
      SuperType.call(this,‘niko‘); //在this的作用域中调用SuperType()
    }
    var instance = new SubType();

这种方式不像原型继承,相当于在子类的作用域中吧超类的属性完完全全复制了一份。因为不是引用的指针,所以,即使是引用类型的属性值,每个实例都会复制一份属性值,所以不会有什么问题哒~~~而且借用构造函数模式可以在子类中传参。

    3.组合继承就是兼顾了原型模式和借用构造函数模式的优缺点。既可以共享方法,也可以让不同的实例分别有自己的属性。

      

      function SuperType(name){
        this.name = name;
        this.colors = [‘red‘,‘blue‘,‘orange‘];
      }
      SuperType.prototype.sayName = function(){
        console.log(this.name);
      }
      function SubType(name,age){
        //继承属性
        SuperType.call(this,name); //第二次调用SuperType()
        this.age = age;
      }
      
      SubType.prototype.sayAge = function(){
        console.log(this.age);
      }

      //继承方法

      SubType.prototype = new SuprType(); //第一次调用SuperType();
      var instance = new Subtype(‘niko‘,34);

          

        如图所示,第一次调超类的时候,SubType.prototype得到两个属性:name,colors。调用Subtype构造函数时,第二次调用超类,在新对象上创建实例属性:name,colors。这两个实例属性屏蔽了原型中的属性。

      这种方法可以达到既可以共享方法,也可以有自己的实例属性,但是调用两次超类的构造函数。

    4.寄生组合式继承

      为了解决组合式的缺点,寄生组合式这个超级大Boss上场了。

        大体思路还是借用构造函数来继承属性,用原型链的混成方法机场方法。与组合 方式不同的是,没有在子类中调用超类,而是取得了一个超类的副本。

      

      function inhertiPrototype(subType,superType){
        var prototype = object(superType.prototype); //创建对象
        prototype.constructor = subType; //增强对象
        subType.prototype = prototype; //指定对象
      }

      

 

时间: 2024-10-29 03:09:47

js 对象创建及其继承的方法的相关文章

javascript中的对象创建与继承

js是一门基于原型的面向对象语言,与传统的面向对象如Java,C#相比,它在对象创建及继承上有自己独特的实现方式,本文主要描述js中对象创建及继承的一些实践. 1.对象创建 方式一:工厂模式创建对象 <script> function createPerson(name,age,job) { var o=new Object(); o.name=name; o.age=age; o.job=job; o.sayName=function(){ alert(this.name); }; retu

js对象之间的继承

js的对象之间的继承抛弃了原型与构造器的概念,而转为字面量对象之间进行属性拷贝的方式进行继承. 首先我们来写一个封装好的继承函数: function extend(parent){ var child={}; for(var i in parent){ child[i]=parent[i]; } child.uber=parent; return child; } 函数有一个实参parent,函数内部新建一个空的子对象,这个子对象就像一个白的画板,逐渐的将父对象上的内容临摹上去.for循环当中是

JavaScript对象创建,继承

创建对象 在JS中创建对象有很多方式,第一种: var obj = new Object(); 第二种方式: var obj1 = {};//对象直面量 第三种方式:工厂模式 function Person(){ var obj = new Object(); obj.name = 'xxx'; obj.age = 12; return obj; } var p1 = Person(); typeof p1 ;// object 第四种方式:构造函数模式 var Person = functio

对象创建的两种方法

对象: 什么是对象呢?现实中的男女朋友?某一个事物的指代?那么在JS的函数中对象就是一组无序属性的集合. 对象的作用就是可以帮助我们封装一些数据,方便我们在程序中的传输或是控制,同时对象也可以帮我们描述一些事物:在JS中对象是有属性和方法组成的. 那么对象要怎么创建呢? 1.首先我们可以通过构造函数的方式创建自定义对象: 例: var student = new Object();  //创建了一个学生的空对象    // 属性(特征,姓名,性别,年龄,手机号,家庭)和方法(打招呼,游泳,打球)

JS对象创建常用方式及原理分析

====此文章是稍早前写的,本次属于文章迁移@2017.06.27==== 前言 俗话说"在js语言中,一切都对象",而且创建对象的方式也有很多种,所以今天我们做一下梳理 最简单的方式 JavaScript创建对象最简单的方式是:对象字面量形式或使用Object构造函数 对象字面量形式 1 var person = new Object(); 2 person.name = "jack"; 3 person.sayName = function () { 4 ale

OC --(2)-- 基础知识分析对象,创建类,自定义初始化方法

1.分析对象 2 创建类(实例变量 方法) 3.创建对象 调用方法 结局问题 @property int age;//相当于声明getter setter 方法; @synthesize age ; //相当于实现getter setter 方法; @synthesize age=_age ;//会去访问_age; 实例变量的可见度;         [email protected]; 公共的 在类的内部和外部都可以进行访问(破坏了面向的对象的封装特性)         [email prot

JavaScript高级程序设计--对象创建的三种方法

创建对象的三种方法: 1.工厂模式 工厂模式是软件工程领域广为人知的设计模式,这种模式抽象了创建具体对象的过程.下面是使用工厂函数创建对象的的一个例子. 2.构造函数: 从上面的例子中,我们看到构造函数与工厂函数不同之处: 1.没有显式的创建对象 2.直接将属性和方法赋给了this对象,没有return语句 另外,函数名Person使用了首字母大写.(这是一个惯例,构造函数始终都应该以一个大写字母开头,而非构造函数应该以一个小写字母开头.) 使用构造函数来创建对象,意味着你可以获取对象的类型.这

用js对象创建链表

//以下是一个链表类 function LinkedList(){ //Node表示要加入列表的项 var Node=function(element){ this.element=element; this.next=null; }; var length=0;//存储列表项的数量 var head=null;//head存储的是第一个节点的引用 //向链表尾部追加元素 this.append=function(element){ var node=new Node(element), cur

JQuery之JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案

JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案 JQuery的版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的版本</title> <