Loading

JS自定义对象

创建对象的几种方式

  1. 使用Object或对象字面量创建对象
  2. 工厂模式创建对象
  3. 构造函数创建对象
  4. 原型模式创建对象

使用Object或对象字面量创建对象

JS中最基本创建对象的方式:

// Object创建对象
var man = new Object();
man.name = 'zhangsan';
man.age = 18;

// 字面量创建对象
var man = {
    name : 'zhangsan',
    age:18
};

但是当我们要创建同类对象时,我们不得不将以上的代码重复n次....为了解决这个问题,就使用到了工厂模式

工厂模式创建对象

JS中没有类的概念,那么我们使用一种函数将以上对象创建过程封装起来,以便于重复调用,同时可以给出特定接口来初始化对象。

function createMan(name,age) {
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    return obj;
}

var man1 = createMan('zhangsan',18);
var man2 = createMan('lisi',20);

这样我们就通过函数可以不断创建同类对象了。

构造函数模式创建对象

我们不仅希望对象的产生可以像工厂车间一般源源不断,还想知道产生的类型是哪一种类型。在创建原生数组Array类型对象时,我们就使用过其构造函数:

var arr = new Array(10); // 构造一个初识长度为10的数组对象

构造函数和普通函数的区别:

  1. 调用方式区别。对于任意函数,使用new操作符调用,那么它就是构造函数;不使用new就是普通函数。
  2. 约定俗成,构造函数名以大写字母开头,普通函数以小写字母开头。
  3. 使用new操作符调用构造函数时,会经历(1)创建一个新对象;(2)将构造函数作用域赋给新对象(使this指向该对象);(3)执行构造函数代码;(4)返回新对象;4个阶段。

使用构造函数将工厂模式的函数重写,并添加新方法:

function Student(name,age) {
    this.name = name;
    this.age = age;
    this.alertName = function(){
        alert(this.name)
    };
}

function Fruit(name, color) {
    this.name = name;
    this.color = color;
    this.alertName = function() {
        alert(this.name)
    };
}

这样再分别创建Student和Fruit的对象:

var v1 = new Student('easy',20);
var v2 = new Fruit("apple", "green");

再用instanceof操作符来检测以上对象类型就可以区分出Student以及Fruit了:

alert(v1 instanceof Student); //true
alert(v2 instanceof Student); // false
alert(v1 instanceof Fruit); // false
alert(v2 instanceof Fruit); //true
alert(v1 instanceof Object); // true 所有对象均继承自Object

使用构造器函数通常在js中我们来创建对象。我们会发现Student和Fruit对象中共有同样的方法,当我们进行调用的时候这无疑是内存的消耗。

我们可以在执行该函数的时候再这样做,办法是将对象方法移到构造函数外部:

function Student(name, age) {
    this.name = name;
    this.age = age;
    this.alertName = alerName;
}

function alertName() {
    alert(this.name);
}

var stu1 = new Student("easy", 20);
var stu2 = new Student("easy2", 20);

在调动stu1.alert()时,this对象才被绑定到stu1上。

通过将alertName()函数定义为全局函数,这样对象中的alertNAME属性则被设置为指向该全局函数的指针。由此stu1和stu2共享了该全局函数,解决了内存浪费问题。

但是,通过全局函数的方式解决对象内部共享的问题,终究不像一个好的解决方法。如果这样定义的全局函数多了,我们想要将自定义对象封装的初衷便几乎无法实现了。更好的方案是通过原型对象模式来解决。

原型的模式创建对象

原型链甚至原型继承,是整个JS中最难的一部分也是最不好理解的一部分。

function Student() {
    this.name = 'easy';
    this.age = 20;
}


Student.prototype.alertName = function(){
                                alert(this.name);
                              };

var stu1 = new Student();
var stu2 = new Student();

stu1.alertName();  //easy
stu2.alertName();  //easy

alert(stu1.alertName == stu2.alertName);  //true 二者共享同一函数
posted @ 2021-03-11 20:40  吃了好多肉  阅读(214)  评论(0编辑  收藏  举报