• javascript(js)创建对象的模式与继承的几种方式


    1.js创建对象的几种方式

    工厂模式

    为什么会产生工厂模式,原因是使用同一个接口创建很多对象,会产生大量的重复代码,为了解决这个问题,产生了工厂模式。

    function createPerson(name,age,job){

        var o=new Object();

        o.name=name;

        o.age=age;

        o.job=job;

        o.sayName=function(){

        console.log(this.name);

       }

      return o;

    }

    var person1=createPerson("kobe","34","player");

    var person2=createPerosn("patty","32","singer");

     构造函数模式

    与工厂模式不同的是,没有显示的创建对象,直接将属性和方法赋值this对象,没有return语句。

    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();

    var person2=new Person();

    console.log(person1.sayName==person2.sayName)//false 说明不同实例的同名函数是不相等的

    如果我们想要的结果是两者相等,可以这样实现

    function  Person(name,age,job){

       this.name=name;

       this.age=age;

       this.job=job;

       this.sayName=sayName;

    }

    function sayName(){

       console.log(this.name);

    }

    var person1=new Person();

    var person2=new Person();

    console.log(person1.sayName==person2.sayName);//true

    创建Person的新实例,需要用到new操作符,这种方式下调用构造函数会经历四个阶段,分别是:

    创建一个新对象

    将构造函数的作用域赋值给这个新的对象

    执行构造函数中的代码

    返回新对象

    person1和person2这两个对象都有一个constructor属性,该属性指向Person

    console.log(person1.constructor==Person);//true

    console.log(person2.constructor==Person);//true

    原型模式

    特点:新对象的这些属性和方法是所有实例共享的

    function Person(){

    }

    Person.prototype.name="kobe";

    Person.prototype.age=38;

    Person.prototype.sayName=function(){

       console.log(this.name);

    }

    var person1=new Person();

    var person2=new Person();

    console.log(person1.sayName==person2.sayName);//true

    有时候我们想知道该属性到底是存在对象中还是存在原型中,可以使用以下方法

    我们使用in操作符和hasOwnProperty结合判断

    "name" in object无论该属性到底存在原型中还是对象中,都会返回true

    而hasOwnProperty只有存在实例中才返回true

    so:只有in操作符返回true,而hasOwnProperty返回false,能确定属性是原型中的属性。

    function hasPrototypeProperty(object,name){

       return !object.hasOwnProperty(name)&&(name in object);

    }

    原型对象存在问题,牵一发而动全身

    function Person(){

    }

    Perosn.prototype=function(){

       constructor;Person,

       name:"kobe",

       age:"29",

       job:"player",

       friends:["shely","count"],

       sayName:function(){

           console.log(this.name); 

      }

    };

    var person1=new Person();

    var person2=new Person();

    person1.friends.push("ann");

    console.log(person1.friends===person2.friends);//true

    解决的方法:是使用构造函数模式和原型模式

    function Person(name,age,job){

       this.name=name;

       this.age=age;

       this.job=job;

       this.friends=["she","ya"];

    }

    Person.prototype={

       constructor:Person,

       sayName:function(){

          console.log(this.name);  

    }

    };

    var person1=new Person();

    var person2=new Person();

    person1.friends.push("VAN");

    console.log(person1.friends===person2.friends);//false

    动态原型模式

    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);

       }

       };

    }

    寄生构造函数模式

    function Person(name,age,job){

       var o=new Object();

       o.name=name;

       o.age=age;

       o.job=job;

       o.sayName=function(){

          console.log(this.name); 

       };

       return o;

    }

    var friend=new Person();//此模式与工厂模式十分类似

    2.js实现继承的几种方式

    原型链继承:原型对象属性共享

    function Parent2(){

       this.name="kobe";

       this.play=[1,2,3];

    }

    function Child2(){

       this.type="children";

    }

    Child2.prototype=new Parent2();

    var say1=new Child2();

    var say2=new Child2();

    say1.play.push("van");

    console.log(say1.play==say2.play);//true

    借用构造函数实现继承:无法实现继承原型对象

    function Parent1(){

       this.name="kobe";

    }

    Parent1.prototype.age=90;

    function Child(){

       Parent1.call(this);

       this.type="service";

    }

    var say=new Child();

    console.log();//error

    组合式继承

    function Parent4(name){

       this.name="kobe";

       this.play=[1,2,3];

    }

    Parent4.prototype.sayName=function(){

      

    }

    function Child4(name,age){

       Parent3.call(this,name);

       this.age=age;

    }

    Child4.prototype=new Parent4();

    Child4.prototype.constructor=Child4;

    Child4.prototype.sayAge=function(){

       console.log(this.age);

    };

    var ins1=new Child4();

    var ins2=new Child4();

    ins1.push.push(4);

    console.log(ins1.play==ins2.play);//false

    原型式继承

    function object(){

       function F(){}

       F.prototype=o;

       return new F();

    }

    var person={

       name:"kobe",

       friends;["yang","du","geng"]

    };

    var onePerson=object(person);

    var twoPerson=object(person);

    寄生式继承

    function object(o){

       function F(){}

       F.prototype=o;

       return new F();

    }

     function create(o){

       var clone=object(o);

       clone.sayHi=function(){

         console.log("hi");

       };

       return clone;

    }

    var person={

       name:"kobe",

       friends:["james","waston","sun"]

    };

    var anotherPerson=creat(person);

    anotherPerson.sayHi();//hi

    寄生式组合继承

    function inheritPrototype(Child5,Parent5){
        var prototype=Object(Parent5.prototype);
        prototype.constructor=Child5;
        Child5.prototype=prototype;
    }
    function Parent5(name){
        this.name=name;
        this.colors=["red","blue","green"];
    }
    Parent5.prototype.sayName=function(){
        console.log(this.name);
    };
    function Child5(name,age){
        Parent5.call(this.name);
        this.age=age;
    }
    inheritPrototype(Child5,Parent5);
    Child5.prototype.sayAge=function(){
         console.log(this.age);
    };

  • 相关阅读:
    DeepLearning.ai学习笔记汇总
    Coursera深度学习(DeepLearning.ai)编程题&笔记
    DeepLearning.ai学习笔记(一)神经网络和深度学习--Week3浅层神经网络
    Andrew Ng机器学习课程笔记--汇总
    Andrew Ng机器学习课程笔记--week3(逻辑回归&正则化参数)
    Andrew Ng机器学习课程笔记--week1(机器学习介绍及线性回归)
    C++学习笔记之模板篇
    【GAMES101-现代计算机图形学课程笔记】Lecture 10 Geometry 1 (介绍)
    GAMES201:高级物理引擎实战指南-Lecture 1 Taichi编程语言介绍
    【GAMES101-现代计算机图形学课程笔记】Lecture 09 Shading 3 (纹理映射)
  • 原文地址:https://www.cnblogs.com/yyfyl/p/7648583.html
Copyright © 2020-2023  润新知