美文网首页JavaScript-learner
5-JavaScript-创建对象--三个重要的模式

5-JavaScript-创建对象--三个重要的模式

作者: _panda | 来源:发表于2017-08-03 16:01 被阅读16次
  • 1,工厂模式
function createPerson(name,age,job){
    var o = new Objec();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        console.log(this.name);
    }
    return o;
}

var person1 = createPerson("lpove",18,"font-end Engineer");
var person2 = createPerson("pandada",22,"UI");
//每次调用函数的时候都要返回三个属性和一个方法
  • 2,构建函数模式
function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function(){
        console.log(this.name);   
    }
}
var person1 = Person("lpove",18,"font-end Engineer");
var person2 = Person("pandada",22,"UI");
//期间 person1 === person2  false

和createPerson()的区别:
- 1,没有显式的创建对象
- 2,直接将属性和方法赋予了 this 对象
- 3,没有return 语句
- 4,大写开头 Person

每次创建一个新的Person实例的时候我们逗做了以下几件事:
- 1, 创建一个新对象
- 2, 将构造函数的作用域赋予给新的对象(所以this也指向这个对象)
- 3, 执行构造函数中的代码
- 4, 返回新的对象

--所以我们也可以这样来勾账函数模式的代码--

function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName =new Function(
        console.log(this.name);   
    )
}

--当然我们没必要每次都这样来实例化一个函数,所以我们可以把sayName放在外面来实现--

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

function sayName(){
    console.log(this.name);
}

--期间我们把函数放在了构造函数外面,我们解决了两个函数 person1和person2,做同一件事的问题,但是我们的函数又暴露全局的作用域中,我们需要实现的封装性就没有意义了。所以我们决定用JavaScript的++prototype++来解决问题 --

  • 3,原型模式
function Person(){}

Person.prototype.name = "lp";
Person.prototype.age = 18;
Person.prototype.job = "UI";
Person.prototype.sayName = function(){
    console.log(this.name);
}

var person1 = new Person();
person1.sayName(); // "lp"
var person2 = new Person();
person1.sayName(); // "lp" 这里的lp 是来自原型的值
console.log(person1.sayName == person2.sayName); //true

var person2 = new Person();
person2.name = "panda";
console.log(person2.name);//这里的panda是实例化的值

-- 现在我们解决了函数不同的问题,又放在了我们的构造函数中--

-- 跟着上面的代码,我们使用hasOwnProperty()函数来判断到底是不是实例化的对象--

function Person(){}

Person.prototype.name = "lp";
Person.prototype.age = 18;
Person.prototype.job = "UI";
Person.prototype.sayName = function(){
    console.log(this.name);
}

var person1 = new Person();
var person2 = new Person();
console.log(person1.hasOwnProperty("name")); //false 这里不是实例化而是原型

person1.name = "panda";
console.log(person1.hasOwnProperty("name")); //true 这里是实例化对象
//如果替换成 in 方法,都会返回 true,因为 in 是测试这个对象是否属于这个原型的prototype

相关文章

  • 5-JavaScript-创建对象--三个重要的模式

    1,工厂模式 2,构建函数模式 和createPerson()的区别:- 1,没有显式的创建对象- 2,直接将属性...

  • 设计模式 - 工厂三兄弟

    简单工厂模式、工厂方法模式、抽象工厂模式都属于创建型模式。这三个模式都是为了解决对象的创建而生。这三个工厂模式就像...

  • (GeekBand)C++设计模式 第二周学习笔记

    Factory Method模式 “对象创建”模式 通过“对象创建”模式绕开new,来避免对象创建(new)过程中...

  • 创建对象的方式(二)

    上回说到创建对象最常用的三个方式。工厂模式、构造函数模式和原型模式。工厂模式不去准确确定对象的类型,构造函数模式封...

  • javascript面向对象与原型

    昨天我们讲了在面向对象中创建对象的几种方式 工厂模式 构造函数模式 工厂模式创建的对象,像工厂一样来创建对象,创建...

  • 模式设计之 原型模式

    定义 原型模式:原型模式用于创建重复的对象,实现对象的拷贝。这种模式类似于创建型模式,提供了创建对象的最佳模式。 ...

  • PHP 设计模式

    PHP的设计模式可以分为三个大类 1. 创建型 在软件工程中,创建型设计模式是处理对象创建机制的设计模式,试图以适...

  • 2018-03-22

    Boolan C++设计模式二 “对象创建”模式:通过“对象创建”模式绕开new,来避免对象创建(new)过程中所...

  • JavaScript对象的创建方法

    大纲 前言1、简单方式创建对象的方法2、工厂模式创建对象3、构造函数模式创建对象4、原型模式创建对象5、组合使用构...

  • 设计模式分为三种类型,共23类

    1.创建型模式 创建型模式是处理对象创建的设计模式,试图根据实际情况使用合适的方式创建对象。基本的对象创建方式可能...

网友评论

    本文标题:5-JavaScript-创建对象--三个重要的模式

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