JavaScript 对象（一）

我会带着你远行 2021-09-14 10:36 236阅读 0赞

## *一、对象的定义* ##

对象是JavaScript的一个基本数据类型，是一种复合值，它将很多值（原始值或者其他对象）聚合在一起，可通过名字访问这些值。即属性的无序集合。  
（ 对象和数组很类似，唯一的不同是它的键值类型是自定义的 ）！

## *二、对象的创建（多种方法）* ##

1、对象直接量 / 字面量

var obj = {
               name: "龙门课栈",
              job: "软件开发"
           }
           console.log(obj.name); // 龙门课栈

2、构造函数：  
（1）、系统自带的的， eg： new Object(), Array(), Number(),Boolean(), Date()…

var obj = new Object();
          obj.name = "龙门课栈";
          obj.job = "软件开发";
          console.log(obj.job);   // 软件开发

（2）、自定义的：为了和普通函数区分，首字母大写，采用大驼峰式写法（普通函数采用小驼峰式写法）

function Obj (name) { 
        this.name = name;
        this.age = 18;
    }
        var obj = new Obj('龙门课栈');
        console.log(obj.name); //龙门课栈
        console.log(obj.age); //18

自定义构造函数的基本构造原理：  
首先，文字理论解释一番，其实一切的关键全在与new这个操作符上，用new和不用new返回的结果大相径庭。不用new，则Obj(‘龙门课栈’)根本就是一个函数的正常执行，没有返回值，则默认返回undefined，而是用new操作符后js引擎就会将该函数看作构造函数看待，经过内部的一系列隐士操作，返回值就是一个对象了。  
看下如下demo  
demo1：用new和不用new的区别演示：

function Obj () { 
       this.age = 18;
    }
      // 不用new
     console.log(Obj()); // undefined
     // 用new
     console.log(new Obj()); //Obj {age: 18}

demo2 用new返回值为对象的基本原理：  
不用new，函数内的this指向的是window，所以this.xxx定义的变量都是window上的属性，但为什么使用new后其中的this就不是window对象了呢？那是因为

用new后，js引擎会在函数被进行两步隐士操作(假设构造函数名为Person)：
    第一步， 
    var this = Object.create(Peson.prototype);   （也是创建对象的一种方法，下边会讲到）  隐士的改变函数内this的含义，现在函数内的this是一个原型为Person.prototype， 构造函数为Person的对象（其实此过程就将想要的对象基本创造成功了，只是差些属性而已，从此可是看出构造函数创建对象的最根本原理是借用Object.create()方法来实现的，只不过被封装功能化了）； 
    
    第二步, 
    在创建的对象设置完所需要的属性后，隐士的将创建的对象this通过return返回  return this;

例子：

// 构造函数的原型
         Person.prototype = {
           say: function () { 
             console.log('I am saying');
           }
         }
    
        // 构造函数
         function Person () { 
          // 隐士操作
          // var this = Object.create(Person.prototype);
    
          //返回对象属性的设置
            this.name = '龙门课栈';
            this.age = 18;
    
          // 隐士操作
            // return this;
         }
    
         var person1 = new Person();
         console.log(person1.name);   // 龙门课栈
         person1.say();              //I am saying

上述两步理论的验证：  
第一步：现在函数内的this是一个原型为Person.prototype， 构造函数为Person的对象

// 构造函数的原型
         Person.prototype = {
           say: function () { 
             console.log('I am saying');
           }
         }
    
        // 构造函数
         function Person () { 
    
            this.name = '龙门课栈';
            this.age = 18;
            // 打印this对象的原型
            console.log(this.__proto__); // 
            // 验证this是否是Person构造函数的实例
            console.log(this instanceof Person); //true
         }
         new Person();//打印结果如下
        // Object say: ()__proto__: Object
        // true
    
         Person();//打印结果如下
        // Window
        // false

第二步：隐士的将创建的对象this通过return返回  
由以上一些代码，我们已经可以看出返回的是满足条件的对象，现在我们创建对象时不用new，并显示的模拟这两步隐士操作来验证（我们不用new则两步隐士操作就不会产生）

// 构造函数的原型
         Person.prototype = {
           say: function () { 
             console.log('I am saying');
           }
         }
    
        // 构造函数
         function Person () { 
           var that = Object.create(Person.prototype);
    
            that.name = '龙门课栈';
            that.age = 18;
    
            return that;
    　　　　//提前返回that导致return this无法执行而失效
         }
    
         var person = new Person();
        //此处不用new也是可以成功返回一个满足条件的对象，因为显示的返回了that
         console.log(person.name); //龙门课栈
         person.say(); //I am saying

ps： 关于显示返回that的问题，当我们用new生成对象，若我们显示return的是一个对象 / 引用值，则会导致return this失效，若返回的是原始值，则return this不会失效

3、Object.create(原型)； 创建一个继承该原型的实例对象

关于此方法的一些注意事项：

（1）、若传参为Object.prototype，则创建的原型为Object.prototype，和 new Object()创建的对象是一样的

Object.create(Object.prototype) <==>new Object();

（2）、若传参为空 或者 null，则创建的对象是没有原型的， 导致该对象是无法用document.write（）打印会报错，因为document.write()打印的原理是调用Object.prototype.toString()方法，该对象没有原型，也就没有该方法，所以document.write()无法打印

由此延伸的知识点： 引用值都也是算作是对象，所以都可以用document.write()打印；原始值numebr, boolean, string都有自己对象的包装类，借助此机制也是可以用document.write()打印出的；

但undefined 和 null既不是引用值，也没有对应的包装类，所以应该无法打印的，但大家会发现这两个值也是可是用document.write()打印的，因为这两个值被设定为特殊值，document.write()打印其是不用调用任何方法的，而是之直接打印其值