[JavaScript知识库]JavaScript语言精粹——对象

文章目录

1.简介

? ? ? ? JavaScript的简单数据类型包括数字、字符串、布尔值、null值和undefined值，其它的都是对象 。其中数字、字符串、和布尔值“貌似”是对象，因为他们都有方法，但是他们都是不可变的。JavaScript中的对象是可变的键控集合。所以在JavaScript中数组是对象，函数是对象，正则表达式是对象，当然，对象自然也是对象。

2.对象字面量

????????对象字面量就是创建对象的一种简单容易阅读的方法。一个对象字面量就是包围在一对花括号中的零或多个的键值对。如下：

var stooge = {
    "first-name" : "c",
    "last-name" : "mm"
};

? ? ? ? 当然了，属性的值可以从包括另一个对象字面量在内的任意表达式里面获取，即，对象是可以嵌套使用的。

var flight = {
    airline : "Oceanic",
    departure : {
        IATA : "SYD",
        time : "2021-7-10 21:03"
    },
    arriver : {
        IATA : "LAX",
        time : "2021-7-10 22:46"
    }
}

3.检索

? ? ? ? 要检索对象向里面包含的值，可以采用在[ ]后缀中括住一个字符串的表达式的方式。如果字符串表达式是一个字符串字面量，而且又是一个合法的JavaScript标识符且不是保留字，也可以使用 . 表示法来代替，这里优先考虑使用 . 表示法，因为他更加的紧凑且可读性更好。

stooge["first-name"]  //"c"
flight.arriver.time   //"2021-7-10 22:46"

? ? ? ? 当你检索一个不存在的成员属性的值的时候，会返回undefined。所以在检索的时候要注意undefined的出现。

stooge["middle-name"]  //undefined
flight.status          //undefined

4.更新

? ? ? ? 更新就是指对象里面的值可以通过赋值语句来更新数据，如果该属性名存在在对象里面，这个属性的之就会被替换，如果不存在的话就会被创建。

//属性名存在对象里面的原属性被替换
stooge["first-name"] = 'cheng';

//属性名原本不存在,就会被扩充到对象当中
stooge["middle-name"] = "cliang";
stooge.nikename = "chengliuliu";//undefined
flight.status = 'overdue';

5.引用

? ? ? ? 对象可以通过引用来传递，他们永远不会被复制。

var x = stooge;
x.nikename = "chengliuliu";
var nike = stooge.nikename;
// 因为x和stooge 是指向同一个对象的引用 ，所以这里nike的值是 "chengliuliu"。
var a = {} , b = {} , c = {};
//a,b,c 引用一个不同的空对象
var a = b = c = {};
//a,b,c 引用一同一个空对象

6.原型

? ? ? ? JavaScript是基于原型创建的一门语言。所以原型在这门语言中非常的重要。在JavaScript中，原型也是一个对象，通过原型可以实现对象的属性继承。

? ? ? ? 1.所有通过对象字面量的创建的对象都连接到Object.proptotype，他是JavaScript中的标配对象。

? ? ? ? 当你创建一个新的对象的时候，你可以选择每个对象作为它的原型。我们可以给Object增加一个create的方法，创建一个使用原对象作为其原型的新对象，进一步让JavaScript的实现机制进行简化。

????????

if(typeof Object.beget !== 'function'){
    Object.create = function(o){
        var F = function(){};
        F.prototype = o;
        return new F();
    };
}
var another_stooge = Object.create(stooge);

? ? ? ? 原型连接在更新的时候是没有用的，当我们对某个对象进行改变时，不会让其对象的原型改变。

//更新another_stooge对象的属性值
another_stooge["first-name"] = "hrlly";
another_stooge.nikename = "maor";
//stooge的值不会发生变化
stoogr["first-name"] = 'c';
stoogr.nikename = "chengliuliu";

? ? ? ? 原型连接只有在检索值的时候才会被用到。如果我们尝试去获取一个对象的某个属性值的话，但是该对象没有这个属性名，那么JavaScript就是试着从原型对象里面找，如果那个原型对象也没有这个值的话，就会从它的原型里面再找一直到Object.prototype。如果还是没有的话就会显示undefined值。?

? ? ? ? 2.JavaScript的对象中都包含了一个" [[Prototype]]"内部属性，这个属性所对应的就是该对象的原型。

//创建一个简单的类，并初始化一下
function Person(name, age){
    this.name = name;
    this.age = age;
    
    this.getInfo = function(){
        console.log(this.name + " is " + this.age + " years old");
    };
}

var yuan = new Person("Cheng", 20);

? ? ? ? 通过下面的代码：我们可以查看到yuan对象的原型

console.log(yuan.__proto__);
console.log(yuan.constructor);

????????在chrome浏览器里面显示：

?????????

? ? ? ? ?从上面的结果可以看出："Person {}"对象就是对象yuan的原型，通过Chrome展开可以看到，"Person {}"作为一个原型对象，也有"__proto__"属性（对应原型的原型）。在这段代码中，还用到了"constructor"属性。在JavaScript的原型对象中，还包含一个"constructor"属性，这个属性对应创建所有指向该原型的实例的构造函数。?

? ? ? ? 其实在这个地方，对象本身并没有"constructor"这个属性，但是通过原型链查找，找到了yuan原型（yuan.__proto__）的"constructor"属性，并得到了Person函数。

? ? ? ??

7.反射

? ? ? ? 检查对象和确定对象有什么属性是很容易的事情，只要去检索该属性验证所得值时候正确就可以了，typeof操作符在这个就发挥了一个很大的作用：

typeof flight.number  //"ubdefined"
typeof flight.status  //"string"
typeof flight.arriver //"object"

? ? ? ? ?请注意原型链中的任何属性都会产生值：

typeof flight.constructor  //"function"
//可以看我上面原型里面会有解释，constructor是构造方法。

8.枚举

? ? ? ? for in语句可以用来遍历一个对象中的所有属性。但是会枚举出所有的属性——包括函数和你不关心原型当中的属性——所以我们就要过滤掉那些不需要的东西，常见的过滤器 hasOwnProperty 方法，以及配合typeof 来排除函数。

var name;
for (name in another_stooge){
    if (typeof another_stooge[name] !== 'function'){
        document.writeln(name + ':' + another_stooge[name]);
    }
}

? ? ? ? 但是使用 for in 语句来遍历对象的属性名的时候，属性名出现是不规律的，当我们要是属性名规律的打印出来，我们就要避免使用 for in 语句，而是创建一个数组，然后使用for循环进行遍历，while 也可以。

9.删除

? ? ? ? delete 运算符可以删除对象的属性。如果该对象存在这个属性，那么该属性就会被删除。且它不会触及原型链里的任何对象。但是删除对象的属性可能会让来自原型链的属性透露出来。

another_stooge.nikename   //"maor"
// 删除 another_stooge 的 nikename 属性 ，让原型的 nikename属性暴露
delete another_stooge.nikename;

another_stooge.nikename   //"chengliuliu"

因为每一个对象都会通过原型链拥有原型的属性，所以当该对象的属性被删除了，就会自动使用原型的属性。

10.减少全局变量污染?

? ? ? ? JavaScript 可以随意的定义全局变量来容纳你应用的所用资源。但是正是这个原因，让JavaScript编写的程序的灵活性下降。这也是JavaScript存在的一个很大的问题，所以我们应该尽量减少对全局变量的定义，

? ? ? ? 最小化的使用全局变量——只创建一个唯一全局变量。

var MYAPP = {};

????????然后使用这个唯一的变量作为容器：

MYAPP.stooge = {
    "first-name" : "chengqiqi",
    "middle-name" : "qiqi",
    departure : {
        IATA : "SYD"
    }
}

? ? ? ? 就只要将全局性的资源放到一个名称的空间下。程序和其他应用程序、组件、类库之间的就很会显著地降低，程序看起来也更有条理性，更易阅读。

? ? ? ?定义唯一一个全局变量可以有效的减少全局污染，使用闭包也是其中的一种方式，将变量写到一个独立的空间里面 就是闭包里面，就可以有效地减少全局污染，但是注意不要定义太多闭包，会占用很多的内存。

注：这里简单的使用了一下其他优秀码农的解释方式：

var name = "GlobalName";
                //全局变量

        var init = (function(){
            var name = "initName";

            function callName(){
                console.log(name);
                //打印name
            }

            return function(){
                callName();
                //形成接口
            }
        }());

        init();    // --> initName


        var initSuper = (function(){
            var name = "initSuperName";

            function callName(){
                console.log(name);
                //打印name
            }

            return function(){
                callName();
                //形成接口
            }
        }());

        initSuper(); // --> initSuperName