面向对象——创建对象的方式

最新推荐文章于 2025-07-04 20:45:19 发布

tclyjy

最新推荐文章于 2025-07-04 20:45:19 发布

阅读量1.7k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：学习笔记文章标签：函数面向对象对象

本文链接：https://blog.youkuaiyun.com/tclyjy/article/details/52945636

学习笔记专栏收录该内容

5 篇文章

订阅专栏

本文介绍了创建JavaScript对象的三种方式，包括JSON对象和直接创建Object的缺点，重点讲述了使用new运算符创建对象的过程及其实现原理。通过不断升级优化，解决了对象模板和内存效率的问题。

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

创建对象的方式

2016/10/21 笔记

第一种创建对象的方式：

创建JSON对象
推荐使用的场合：作为函数的参数，临时只用一次的场景。比如设置函数原型对象。

    var object = {
        name: "Eric",
        age: 24,
        sayHi: function(){
            console.log("My name is "+ this.name + " this year is " + this.age + "years old.")
        }
    };

第二种创建对象的方式：

创建一个Object对象

    var object = new Object();
    object.name = "Eric";
    object.age = 24;
    object.sayHi = function(){....};

以上两种创建对象方式的缺点:不能作为对象创建的模板，也就是不能用new进行构造新对象。

=================================================================

第三种创建对象的方式：

    function Person() {
        this.name = "Eric";
        this.age = 24;
        this.sayHi = function(){
            console.log(this.name);
        }
    }

    var object1 = new Person();
    var object2 = new Person();

这种创建对象方式解决了前两种方式的缺点，可以作为对象创建的模板，可以一直复用创建出多个对象。

new运算符的作用：

执行构造函数（new后面的那个函数），在构造函数内部创建一个空对象
把上一部创建的空对象跟构造函数的原型对象进行关联
然后把this指向当前空对象
在构造函数执行结束后，如果没有return，把空对象返回给object

new运算符原理

第三种方式有个缺点：对象的内部的函数会在每个对象中都存一份如果创建的对象非常多的话，那么非常浪费内存。函数的行为是所有对象可以共有，不需要每个对象都保存一份。所以，可以把函数放到原型中进行声明，那么所有对象都有了公共的函数，而且内存中只保留一份。所有的属性写到对象的内部

第三种方式beta1：

    function Person() {
        this.name = 'Eric';
        this.age = 24;
    }
    Person.prototype = {
        sayHi: function() {
        },
    };

    var object1 = new Person();
    var object2 = new Person();

继续升级 beta2 ：

    function Person(name,age) {
        this.name = name || "";
        this.age = age || "";
    }
    Person.prototype = {
        sayHi: function() {
        },
    };

    var object1 = new Person(name1,age1);
    var object2 = new Person(name2,age2);

问题：1、调用者如果传递参数的顺序发生变化，那么废了
问题：2、参数增减都会导致函数声明变化，调用的地方也可能发生变化。

如何解决：继续升级 beta3 :

    function Person(option) { //用一个对象把所有参数覆盖
        this.name = option.name || "";
        this.age = option.age || "";
    }
    Person.prototype = {
        sayHi: function() {
        },
    };

    var object1 = new Person({
            name: "Eric",
            age: 24
        });
    var object2 = new Person({
            name: "XXX",
            age: xx
        });

继续优化，把初始化的代码放到init函数中

继续升级 beta4 :

    function Person(option) {
        this._init(option);
    }
    Person.prototype = {
        _init: function (option){
            this.name = option.name;
            this.age = option.age;
        },
        sayHi: function(){
            console.log("HI");
        }
    };

    var object1 = new Person({
            name: "Eric";
            age: 24
        });
    object1.sayHi();