不用new的方式手动构造JS对象

最新推荐文章于 2024-09-23 16:51:15 发布

原创最新推荐文章于 2024-09-23 16:51:15 发布 · 634 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #对象

js 同时被 2 个专栏收录

12 篇文章

订阅专栏

对象

1 篇文章

订阅专栏

本文深入讲解JavaScript中如何通过工厂函数和原型链手动构造对象。包括this上下文、原型链的理解及应用，通过具体示例展示了手工构造Person对象的过程，并探讨了构造函数返回不同类型的对象时的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先我们先写一个工厂函数

function Person(name) {
    this.name = name
}

Person.prototype.sex = 'male';
Person.prototype.age = 22;

一般来说，我们生成Person对象就用 var p1 = new Person('my name')的方式。
其实在理解了this上下文，原型链后，我们也可以手工构造一个Person对象，方法如下

function createPerson(name) {
    var tmp = {};
    tmp.__proto__ = Person.prototype;
    var obj = Person.call(tmp, name);
    if (typeof obj == 'object') { 
        return obj;
    }
    return tmp;
}

运行结果如下：

下面一一介绍每条语句的作用

var tmp = {};

先生成一个空对象,使用Object.create()方法也可以

tmp.__proto__ = Person.prototype;

修改原型链

var obj = Person.call(tmp, name);

改变this上下文，执行对象的构造函数，如果是多个参数，可以用Person.apply(tmp,arguments)的方式，方便传入不定参数

if (typeof obj == 'object')

如果工厂函数return的是Object类型，则会替换掉当前构造的对象
这里测试一下

function Person(name) {
    this.name = name
    return new Animal();
}

Person.prototype.sex = 'male';
Person.prototype.age = 22;
var p1 = new Person('cch');


function Animal() {
    this.wow = true;
    this.claw = true;
}

Animal.prototype.further = 'soft';

console.log(p1);