美文网首页
创建对象的几种方式

创建对象的几种方式

作者: 代艳霞 | 来源:发表于2020-04-27 20:19 被阅读0次

1.工厂模式

function createPerson(name, age, job) {
        var o = new Object();
        o.name = name;
        o.age = age;
        o.job = job;
        o.sayName = function () {
            alert(this.name);
        }
        return o;
    }
  • 使用方式
 var gby = createPerson("gby", 28, "architect");
 var dyx = createPerson("dyx", 28, "web");

2.构造函数(缺点:每个方法需要在原型上构建一遍,重复)

function Person(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job;
        this.sayName = function () {
            alert(this.name);
        }
    }

  • 使用方式及测试
  var person1 = new Person('wxx', 29, 'taobao');
    var wl = new Person('wl', 39, 'free');
    console.log("person1:constructor:", person1.constructor);
    //检测对象类型
    console.log(person1 instanceof Object);
    console.log(person1 instanceof Person);

3.原型模式(原型上的引用类型如果被修改--所有的实例也会被修改--违背了每个实例需要有自己的独有属性的原则);

第1种写法

function Pro() {
    };
    Pro.prototype.name = "Nick";
    Pro.prototype.age = 29;
    Pro.prototype.job = "articher";
    Pro.prototype.speakName = function () {
        console.log(this.name);
    };
  • 使用方式
  var pro1 = new Pro();
    pro1.speakName();
    var pro2 = new Pro();
    pro2.speakName();

    //测试某个原型是否是某个实例
    console.log(Pro.prototype.isPrototypeOf(pro1));
    console.log(Pro.prototype.isPrototypeOf(pro2));

    //获取对象的原型__proto__
    console.log("Object.getPrototypeOf(pro1):", Object.getPrototypeOf(pro1) == Pro.prototype);
    //hasOwnProperty()判断属性存在于实例还是原型(属性存在于实例时才返回true)
    console.log("hasOwnPrototype:", pro1.hasOwnProperty("name"));
    pro1.like = "footer";
    console.log("in:", ("like" in pro1));
    console.log("in:", pro1.hasOwnProperty("like"));

第2种写法

    //原型写法
    function Propertys() {
    };
    var friend1 = new Propertys();
    console.log("friend1.job:", friend1.job);
    Propertys.prototype = {
        constructor: Propertys,
        name: "gby",
        age: 29,
        job: "free",
        arr: ["gby", "dyx"]
    };
    console.log("friend1.job:", friend1.job);
    var friends2 = new Propertys();
    console.log("friends2.job:", friends2.job);

    //  原型的弊端
    var add1 = new Propertys();
    add1.arr.push("wxl");
    console.log("add1.arr:", add1.arr);
    var add2 = new Propertys();
    console.log("adds.arr:", add2.arr);

4.组合使用原型模式和构造函数模式;

 function ConstructorPrototype(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job;
    }

    ConstructorPrototype.prototype = {
        constructor: ConstructorPrototype,
        sayName: function () {
            console.log("ConstructorPrototype.name:", this.name);
        }
    }
  • 使用方式
 var cons1 = new ConstructorPrototype("dyx", 29, "web");
    var cons2 = new ConstructorPrototype("mm", 56, "peasant");
    cons1.sayName();
    cons2.sayName();

5.动态原型模式(确定某些方法是否存在--决定是否还需要初始化)

 function DynamicConstructorPrototype(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job;
        if (typeof sayName != "function") {
            DynamicConstructorPrototype.prototype.sayName = function () {
                console.log("DynamicConstructorPrototype.name:", this.name);
            }
        }
    }
  • 使用方式
var dyna1 = new DynamicConstructorPrototype("dyx1", 29, "web1");

dyna1.sayName();

6.寄生构造函数模式

function ParasiticConstructor(name, age, job) {
        var o = new Object();
        o.name = name;
        o.age = age;
        o.job = job;
        o.sayName = function () {
            console.log("ParasiticPrototype.name:", this.name);
        }
        return o;
    }
  • 使用方式
var para1 = new ParasiticConstructor("dyx2", 29, "teacher");

para1.sayName();

function SpecialArray() {
        //创建数组
        var values = new Array();
        //添加值
        values.push.apply(values, arguments);
        // 添加方法
        values.piedString = function () {
            return this.join("|");
        }
        return values;
    }
var colors = new SpecialArray("red", "green", "blue");
console.log("colors:",colors.piedString());

7.稳妥构造函数模式(一:新创建的实例方法不引用this,二,不使用new操作符调用构造函数)

  function ReliableConstructor(name,age,job){
        //创建被返回的对象;
        var o = new Object();
        o.sayName=function(){
            console.log("reliable:",name)
        }
        return o;
    }
  • 使用方式
var relibleName = ReliableConstructor("reliabledyx",29,"web");

relibleName.sayName();

//原型链
    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();
    console.log("instance:",instance.getSuperValue());

8.借用构造函数

 function SupType(){
        this.color=["red","green","yellow"];
    }
    function SbType(){
        SupType.call(this);
    }
  • 使用方式
 var colo1 = new SbType();
    colo1.color.push("black");
    alert(colo1.color);
    var colo2 = new SbType();
    alert(colo2.color);

原型扩展方法

    String.prototype.startWidth = function (text) {
        return this.indexOf(text) == 0;
    };
    var str = "hello world";
    console.log(str.startWidth("hello"));

相关文章

  • 字面量方式及内置构造函数创建对象

    创建对象的几种方式 字面量方式创建对象 基本写法 ①字面量的方式来创建对象示例 存在的问题 [01] 代码复用性差...

  • 16、Java创建对象有几种方式?

    Java创建对象有几种方式? java中提供了以下四种创建对象的方式: 1、new创建新对象; 2、通过反射机制;...

  • 创建对象的几种方式

    字面量方式和Object构造函数方式创建对象 优点: 方便缺点: 当需要创建很对对象的时候,会有很多重复的代码 工...

  • 创建对象的几种方式

    第一种:对象字面量的方式 第二种:创建Object实例: 第三种:数构造函数无参数构造函数 带参数的构造函数 第四...

  • 创建对象的几种方式

    真是百看不如一练啊 /*var box= new Object(); //创建一个对象 box.name= "xi...

  • 创建对象的几种方式

    字面量创建对象 new Object() 创建对象 工厂模式 构造函数 原型 混合

  • 创建对象的几种方式

    字面量式(最常用) 调用系统的Object构造函数,创建实例对象 工厂模式 构造函数模式 与工厂模式的区别: 没有...

  • 创建对象的几种方式

    1.工厂模式 就像工厂里做好的模具厂一样,一个一个的返回 2、构造函数式 这种方式会经历四个步骤1.创建一个新对象...

  • 创建对象的几种方式

    1.工厂模式 使用方式 2.构造函数(缺点:每个方法需要在原型上构建一遍,重复) 使用方式及测试 3.原型模式(原...

  • 原型链相关问题

    创建对象有几种方法 使用对象字面量的方式创建 使用构造函数创建对象 使用Object.create()方法创建 原...

网友评论

      本文标题:创建对象的几种方式

      本文链接:https://www.haomeiwen.com/subject/ttmhmhtx.html