创建对象的几种方式(一)

创建对象的几种方式(一)

看红宝书+查资料,重新梳理JavaScript的知识。

工厂模式

首先需要一个函数(工厂),然后在函数中创建具体对象。这种模式可以抽象创建具体对象的过程,这样子,我们想要创建对象,只需要调用函数,让属性值进厂即可。

function createPerson(name, age{
    const o = new Object()
    o.name = name;
    o.age = age;
    o.listen = function ({
        console.log('Egoist')
    };

    return o;
}

const person1 = createPerson('clz'21);
const person2 = createPerson('czh'111);

console.log(person1);   // {name: 'clz', age: 21, listen: ƒ}
console.log(person2);   // {name: 'czh', age: 111, listen: ƒ}

person1.listen();       // Egoist

构造函数模式

ECMAScript中的构造函数是用于创建特定类型对象的。所以我们可以通过自定义构造函数,以函数的形式来为对象定义属性和方法。

function Person(name, age{
    this.name = name;
    this.age = age;
    this.listen = function ({
        console.log('Egoist')
    };
}

const person1 = new Person('clz'21);
const person2 = new Person('czh'111);

console.log(person1);   // {name: 'clz', age: 21, listen: ƒ}
console.log(person2);   // {name: 'czh', age: 111, listen: ƒ}

person1.listen();       // Egoist

此时,我们不再需要通过原生构造函数Object来显示地创建对象,而是直接通过this关键字来实现,也不再需要把创建的对象return出去。但是,构造函数和普通函数的使用方式也不太一样,需要通过new操作符来new出一个对象。

构造函数名称的首字母需要大写,非构造函数以小写字母开头。不这样子虽然也可以,但是按照规范,才能更好地区分构造函数和普通函数。

构造函数和普通函数的使用方式不太一样,需要使用new操作符。

为什么需要这样子的方式调用构造函数呢?因为以这样的方式调用函数会执行以下操作:

  1. 在内存中创建一个新对象
  2. 新对象的 __proto__指向构造函数的原型prototype(具体可以查看之前的写的原型链文章)
  3. 构造函数内部的this指向新对象
  4. 执行构造函数内的代码
  5. 如果构造函数返回非空对象,则返回该对象;否则返回在内存中创建的那个对象。
function person(name, age{
    this.name = name;
    this.age = age;
    this.listen = function ({
        console.log('Egoist')
    };

    return {
        name'clz',
        age999
    }
}

const person1 = new person('clz'21);

console.log(person1);   // { name: 'clz', age: 999 }

构造函数也是函数

如果构造函数不使用new操作符来调用,就是普通函数。这时候,添加的属性、方法会被添加到全局对象上。

function Person(name, age{
    this.name = name;
    this.age = age;
    this.listen = function ({
        console.log('Egoist')
    };
}

const person1 = Person('clz'21);

console.log(person1)            // undefined
console.log(globalThis.name);   // clz
console.log(globalThis.age);    // 21

上面使用了globalThisglobalThis是全局对象的标准名称。因为在浏览器中,全局对象是window,而在Node.js中,全局对象是global。但是在浏览器中,访问 global报错,在Node.js中,访问 window也会报错。使用globalThis就不会出现这个问题,简单来说的话,就是globalThis会变身,在浏览器时,会变成window,在Node.js时,会变成global

上面给对象添加方法等价于

this.listen = new Function('console.log("Egoist")')

也就是说,不同实例上的函数同名但不相等。

console.log(person1.listen === person2.listen)  // false

但是呢?都是干一样的事,却要定义两个不同的Function实例,这很明显很不合理,毕竟如果需要100个实例,那就需要100个Function实例。所以,应该先在外面声明函数,然后才把声明的函数赋给实例的方法。

function Person(name, age{
    this.name = name;
    this.age = age;
    this.listen = listen
}

function listen({
    console.log("Egoist");
}


const person1 = new Person('clz'21);
const person2 = new Person('clz'111);

console.log(person1.listen === person2.listen)      // true

person1.listen()        // Egoist


原文始发于微信公众号(赤蓝紫):创建对象的几种方式(一)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/45421.html

(0)
小半的头像小半

相关推荐

发表回复

登录后才能评论
极客之家——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!