JavaScript对象(二)

对象(二)

        当我们需要创建具有同样接口的大量的对象时,使用构造函数或字面量形式就会出现明显的不足,我们需要重复的编写很多重复代码。

        而解决这个问题的方式,就是使用工厂模式。

1.工厂模式

        工厂模式是一种创建型模式,用于创建对象,降低代码冗余度。

        为了更方便的创建对象,让整个代码更整体,这时候就可以使用工厂模式。

优点:只需要调用工厂模式函数并添加参数,就能创建出所需要的对象。

缺点:工厂模式本质就是将创建对象的过程进行封装,但是不知道具体的数据类型(比如是Person还是Dog),只能知道这是一个对象。

// 1.创建一个函数  将创建对象的代码封装在工厂函数
function createPerson(name, age, gender) {
    // 2.使用构造函数创建模板实例
    var person = new Object();

    // 3.给模拟实例赋值
    person.name = name;
    person.age = age;
    person.gender = gender;
    person.sayName = function () {
        console.log(this.name);
    }
    // 4.返回实例对象
    return person;
}
// 使用工厂函数创建实例
var person1 = createPerson('lisi', 23, 'male')
var person2 = createPerson('zhangsan', 22, 'female')
person1.sayName();  //lisi
person2.sayName();  //zhangsan
2.构造函数模式

        ES中的构造函数用于创建特定类型对象。

        原生的构造函数:Array、Object、Number…

        在JS中可以自定义构造函数,自定义对象类型的属性和方法

2.1 自定义构造函数
函数声明形式
// 1.使用函数创建一个自定义的构造函数  function  函数表达式
function Person(name, age, gender) {
    // 2.直接使用this,进行赋值
    //this指向调用该函数的实例
    this.name = name;
    this.age = age;
    this.gender = gender;
    this.sayName = function () {
        console.log(this.name);
    }
}
// 3.使用new操作符  创建一个实例
var p1 = new Person('lisi', 21, 'male');
var p2 = new Person('zhangsan', 22, 'female');
p1.sayName();  //lisi
p2.sayName();  //zhangsan
console.log(p1.constructor === Person); //true
console.log(p1.constructor === Object);// false

console.log(p1 instanceof Person); //true
console.log(p1 instanceof Object); //true
函数表达式形式
var Person = function (name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
  this.sayName = function () {
    console.log(this.name);
  };
}

自定义函数模式和工厂模式的区别

  1. 不显式的创建对象
  2. 属性和方法直接赋值给this
  3. 无return

注意:构造函数的首字母都大写,表明这是一个构造函数,非构造函数首字母则用小写。

2.2 创建实例

        我们创建实例通过new操作符,后接构造函数名

        其中,每个实例都不相同,但是都会继承构造函数的原型中的constructor属性,该属性指向该构造函数。

2.3 instanceof

        用于判断一个对象是某个对象的实例
        constructor也可以用于检测数据类型,但是instanceof更可靠.

//instanceof 操作符的结果所示:
console.log(p1 instanceof Object); // true 
console.log(p1 instanceof Person); // true 
2.4 构造函数问题

        在构造函数中定义的方法,会在每个实例中创建一遍,会重复的定义多个具有相同功能的函数,因此,虽然每个实例都是调用的同一个名称的函数,但是却是不同的函数。

解决方法:将构造函数中的方法在构造函数外部进行定义

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

        虽然解决了重复定义具有相同功能函数的问题,但是又引入了一个新问题,即影响全局作用域。
        若在构造函数中有多个方法,在全局作用域中我们就要定义多个方法。而这个新问题我们通过原型模式解决。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值