【js高级 之创建对象的四种方式】

目录

一、js的基本创建方式？

二、工厂模式

三、构造函数模式

四、原型模式

---

一、js的基本创建方式？

方式一：

var  s1=new Object（）

s1.name="王一"；

s1.age=22；

s1.run=function（）{

console.log(this.name+"正在跑")

}

方式二：

var s1={
   name:"王一",
   age:22,
   run:function(){
                console.log(this.name+"正在跑")
            }
}
s1.run()//王一正在跑

优点：简单、方便 ，缺点：无法量产

每次创建都要写出对象的所有属性和方法

二、工厂模式创建对象

 //创建一个学生对象： 名称 年龄  方法：吃饭
        //创建10个
         //利用函数来创建对象  工厂模式 
      
        function createStudent(name,age){
            var s=new Object()//{}
            s.name=name
            s.age=age
            s.eat=function(){
                console.log(this.name+"正在吃")
            }
            return s
        }

 var s1=createStudent("王一",21)
        console.log(s1)
        var result=s1 instanceof Student//判断类型的方法
        console.log(result)//false
        s1.eat()
        var s2=createStudent("王二",22)
        console.log(s2)

    优点：可以量产对象
     缺点：通过工厂模式创建出来的对象，无法明确对应类型,无法用instanceof判断类型

注意：number string boolean  简单数据类型， 使用直接书写的方式无法名确对应类型

必须使用  new Number（ ）   new String（）方式创建

// var num = new Number(123)---result---true
        var num = 123;
        var result = num instanceof Number
        console.log(result)//false

三、构造函数模式

 借鉴了其他语言创建对象方法， 创建类
       类：同一类型事物的总称 包含的属性和方法 都写到构造函数里
       js默认没有类这个概念
       构造函数模式：来模拟类！！！ 利用js this指向的问题

 //创建学生类  属性 ：名字  年龄  ，方法：学习
function Student(name,age){
            this.name=name
            this.age=age
            this.study=function(){
                console.log(this.name+'正在学习')
            }
        }

  var s1=new Student("王一",21)
        var s2=new Student("王仁",21)
        var s3=new Student("王四",23)
s1.study()//王一正在学习

 //不同对象的study方法，都存到了不同的地址
 //公用的方法，没有封装！！！

 构造函数模式的优点：明确了类型！！！
    缺点：共用的方法，占据内存！！

new做了什么？

       1.创建一个空对象 {}
       2.执行后面的构造函数，将函数内容this，指向空对象
       3.函数执行完成后，将创建的空对象返回给前方变量

四、原型模式创建对象

 在创建构造函数的过程中，将共有的方法放入构造函数的原型里

 function Student(name,age){
            this.name=name
            this.age=age
        }
        //prototype 设置原型对象
        Student.prototype.study=function(){
            console.log(this.name+"正在学习")
        }
//实例化对象s1，s2
        var s1=new Student("王一",21)
        var s2=new Student("王二",22)
        console.log(s1.eat==s2.eat)  //true
        //__proto__ 实例化对象的原型
        //prototype 构造函数的原型
 console.log(s1.__proto__==Student.prototype) //true
 // s1.eat()
 // s2.eat()
//改变s1的原型对象
  s1.prototype.study=function(){

            console.log(this.name + "偷懒")

        }
s1.study()//王一偷懒
s2.study()//王二偷懒

//那么问题来了，我只想单改一个实例化对象的原型study方法怎么办？
//只需使用下面的方法
   s1.study = function() {
            console.log(this.name + "在做笔记")
        }
    s1.study(); //王一在做笔记
    s2.study(); // 王二正在学习

这样实例化的s1会优先使用同名的 在原型外面的 study方法，就实现了单改s1的study方法

优点：相对于构造函数模式，将共用的方法放在原型里，节省了内存

注意：因为原型共用内存，一个实例化的study原型方法改变，构造函数的原型也就改变，其他实例化对象的原型随之改变