js创建对象的三种方式和js工厂模式创建对象

本是古典何须时尚 2023-06-05 08:12 133阅读 0赞

## 文章地址: [https://www.cnblogs.com/sandraryan/][https_www.cnblogs.com_sandraryan] ##

## 创建对象 ##

创建对象的三种方式

构造函数 ，是一种特殊的方法。主要用来在创建对象时初始化对象

1. 调用系统的构造函数创建对象（又称为实例化一个对象）

var obj = new Object();

// 添加属性，方法
        obj.name = 'jack';
        obj.age = 20;
        obj.eat = function(){
            //匿名函数
            console.log('hi');
        }

// 调用属性/方法
        console.log(obj.name);
        obj.eat();

2. 自定义构造函数创建对象和工厂模式（不同）

构造函数首字母大写（区分构造函数和普通函数的人为规定）

对象是一个特定事物的属性和方法的集合，构造函数是类似于一大类的集合（js中没有类的概念）

利用一个构造函数创建对象的过程称为实例化一个对象

// 一个人的类型
        var person = new Object();
        person.name = 'lucy';
        person.age = 20;
        person.sayHi = function(){
            console.log('person ' + person.name);
            console.log('person ' + this.name);
    
        }
    
        // 一个学生的类型
        var stu = new Object();
        stu.name = 'sunny';
        stu.age = 18;
        stu.task = function(){
            console.log('study ' + stu.name);
            console.log('study ' + this.name);
        }
        // 在当前对象的方法中可以访问当前对象的属性，可用this指代
    
        // 调用各自的属性
        // 调用各自的方法
    
        person.sayHi();
        stu.task();
        //判断person是否是一个对象，不能判断是那个对象（person还是stu）
        console.log(person instanceof Object);

创建对象的代码封装在一个函数中，可以一次性创建多个对象

构造函数创建对象

function Person(name,age) {
          this.name=name;
          this.age=age;
          this.sayHi=function () {
            console.log("您好");
          };
        }
        //创建对象---->实例化一个对象,的同时对属性进行初始化 需要new关键字
        var per=new Person("小红",20);

工厂模式创建对象

// 工厂模式创建对象
        function createObject(name,age){
            // 创建对象
            var obj = new Object();
            // 对象添加属性
            obj.name = name;
            obj.age = age;
            // 对象添加方法
            obj.sayHi = function(){
                console.log('hi');
            };
            return obj;
        }
         var per1 = createObject('mary',10);
         console.log(per1);
         
        var per2 =  createObject('jack',20);
        console.log(per2);
    　　//new 用于创建空对象并使this指向当前对象

![1645790-20190921173903289-1977090845.png][]

// 方法也可以传递不同的值
        function createObject(name,age){
           
            var obj = new Object();
            obj.name = name;
            obj.age = age;
            obj.sayHi = function(word){
                console.log(word);
            };
            return obj;
        }
         var per1 = createObject('mary',10);
         per1.word = 'hello';
         console.log(per1);
         
        var per2 = createObject('jack',20);
        per2.word = 'hi';
        console.log(per2);

共同点:都是函数,都可以创建对象,都可以传入参数

工厂模式:

函数名是小写

有new,

有返回值

new之后的对象是当前的对象

直接调用函数就可以创建对象

自定义构造函数:

函数名是大写(首字母)

没有new

没有返回值

this是当前的对象

通过new的方式来创建对象

3. 字面量方式

var Dog = {
            name: 'jack',
            age: 2,
            eat: function(){
                console.log('eating');
            }
        }
    
        Dog.eat();
        console.log(Dog);

// 创建一个叫dog的对象，添加名字/年龄/颜色的属性，行走和吃东西的方法

![1645790-20190923093219150-65711589.png][]

构造函数可以实例化对象

构造函数中有一个属性叫prototype,是构造函数的原型对象

构造函数的原型对象(prototype)中有一个constructor构造器,这个构造器指向的就是自己所在的原型对象所在的构造函数

实例对象的原型对象(\_\_proto\_\_)指向的是该构造函数的原型对象

构造函数的原型对象(prototype)中的方法是可以被实例对象直接访问的

转载于:https://www.cnblogs.com/sandraryan/p/11563908.html

[https_www.cnblogs.com_sandraryan]: https://www.cnblogs.com/sandraryan/
[1645790-20190921173903289-1977090845.png]: /images/20230601/c34c3a808cff4f63bb8d05ff8a6a70af.png
[1645790-20190923093219150-65711589.png]: /images/20230601/b05d0183b02b49b8aede4761c42bf5c9.png