js 面象对象 create 对象的操作方法assign defineProperty freeze getOwnPropertyNames 原型方法isPrototypeOf

前言

什么是对象，其实就是一种类型，即引用类型。而对象的值就是引用类型的实例。
在 ECMAScript 中引用类型是一种数据结构。用于将数据和功能组织在一起，它也常被称做为类，但 ECMAScript 中却没有这种东西。虽然 ECMAScript 是一门面向对象的语言。却不具备传统面向对象语言所拥有的类和接口等基本结构。

• 万物皆对象，除了数字，字符，布尔这种绝对值以外的所有都是对象；
• 对象是类的实例化体现，类是对象的抽象体现；
• 对象是一个个体，他具备自身类的所有属性和方法；

创建对象

创建对象的三种方式：字面量创建、构造函数创建、根据对象创建

字面量创建

花括号在语言中是指代码块的意思，在obj也相当于一个代码块。obj自身在使用中可以完成和丰富各种代码块。
在函数中，有时候需要返回一个对象，这时候，我们通常使用花括号的形式来返回对象。

//字面量创建法
var obj={a:1,b:2};
var obj={
	//属性:属性值,
	//方法:方法函数
}

//使用花括号的形式来返回对象
function abc(){
	return {
      //属性：属性值,
      //方法：方法函数
	}
}

构造函数创建

中括号中的属性和方法必须是字符串，如果是变量，该内容必须是字符型变量。
在 javascript 中数组不是单独的类型，它是由对象扩展出来的，因此，可以使用构造函数来建立数组。

//构造函数创建法
var obj = new Object({a:1});

//obj.属性=属性值
//obj[属性]=属性值
//obj.方法=方法函数
//obj[方法]=方法函数

//创建数组，在javascript中数组不是单独的类型，它是由对象扩展出来的，因此，可以使用这种形式来建立数组。
var arr=new Object([]);

根据对象创建 Object.create ( )

该方法可以针对已知对象创建新对象，也可以创建一个空对象。

语法：
Object.create ( proto, [ propertiesObject ] )

有两个参数：

• proto：必须。表示新建对象的原型对象，该参数可以是 null，对象，函数的 prototype 属性（创建空的对象时需要传 null ，否则会抛出 TypeError 异常）。
• propertiesObject：可选。添加到新创建对象的可枚举属性（即其自身的属性，而不是原型链上的枚举属性）对象的属性描述符以及相应的属性名称。这些属性对应 Object.defineProperties() 的第二个参数。

var obj={a:1,b:2};
//根据对象创建法，实例继承；前面学的类的继承是抽象继承
//根据空对象创建
var obj1=Object.create({});
//根据已有对象创建
var obj2=Object.create(obj,{
  c:{
        writable:true,
        configurable:true,
        value:4
    }
})
obj2.d=[1,2,3,4];

console.log(obj2);//打印结果如下图
console.log(obj2.a);// 1
delete obj2.a;//没有用，不能删除原型链属性
obj2.a=obj2.__proto__.a;//将原型链的属性重新赋值给 obj2.a

说明：

• 原型链属性：被放在原型链（__proto__ ）下的属性；
• 对象属性：对象下直属的属性；
• 如果该对象有对象属性，就可以直接获取对象属性，如果没有对象属性则获取距离该对象最近的原型链属性；
• 设置属性时，只会设置对象属性，不能设置原型链属性；
• delete可以直接删除对象的对象属性，不能删除原型链属性；
• 删除对象时，为了防止内存泄露，需要先将对象设置成 null ，再进行删除；
• 使用 Object.create() 方法创建的对象时，属性是在原型下面的，创建后的对象可以直接访问原型链属性；
  

对象的操作方法（静态方法）

delete

删除对象的属性。

var obj={a:1,b:2};
delete obj.a;
//也可以根据键值删除对象下的属性
delete obj["a"];
console.log(obj);//{b:2}

Object.assign()

Object.assign() 方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。如果目标对象中的属性具有相同的键，则属性将被源中的属性覆盖。后来的源的属性将类似地覆盖早先的属性。

语法：
Object.assign(目标对象，源对象1，源对象2。。。)

var obj={a:1,b:2};
//obj1必须先创建存在的
var obj1={};
Object.assign(obj1,obj);

//也可以这么写
var obj1=Object.assign({},obj);

//当多个源对象复制时，如果有相同的属性，后面的将会覆盖前面的
var obj2={b:3,c:10};
var obj3=Object.assign({},obj,obj2);
console.log(obj3);//{b: 3, c: 10, a: 1}

说明：

• Object.assign() 只能复制对象属性，不能复制对象的原型链属性；
• Object.assign() 只能复制可枚举类型的属性；
• Object.assign() 引用关系也会一同被复制，只能浅复制；
• 当多个源对象复制时，如果有相同的属性，后面的将会覆盖前面的；

Object.assign() 和 Object.create() 的区别

• Object.create() 是可以创建对象的；
• Object.assign() 是不能创建对象的，必须拥有目标对象才能进行创建；

Object.defineProperty()

详细定义对象的属性

语法：
Object.defineProperty(obj, prop, descriptor)
第一个参数为对象名称，第二个参数为属性名称，第三个参数为属性描述对象，第三个参数的值为：

• configurable，是否可删除属性并且是否可以重定义该属性的属性描述对象，默认值是false；
• enumerable，是否可以遍历，是否可枚举（该对象在使用for in遍历时，不可枚举属性是不能被遍历，也不能被Object.assign()复制），默认值是false；
• writable，是否可写，是否能够修改值，默认值是false；
• value，设置值；

var obj = {b:2};
Object.defineProperty(obj, "a", {
     // 是否可删除属性并且是否可以重定义该属性的属性描述对象，默认值是false
     configurable: false,
     // 是否可以遍历，是否可枚举（该对象在使用for in遍历时，不可枚举属性是不能被遍历，也不能被Object.assign()复制）
     enumerable: false,
     // 是否可写，是否能够修改值
     writable: false,
     // 是值，还可以是function方法
     value: 10,
 });
 console.log(obj);//{b:2,a:10}
 
 // get和set不能够和writable和value同时定义
Object.defineProperty(obj, "c", {
    configurable: false,
    enumerable: false,
    get: function () {
        return this.b;
    },
    set: function (value) {
         this.b=value;
    }
})
 console.log(obj);//{b:2,a:10,c:2}

当enumerable 为false时，打印出的结果中，该属性的字体颜色较浅。

当设置值为函数时

var obj={
   a:1,
    b:2
}
Object.defineProperty(obj,"abc",{
    value:function(){
        console.log("abc")
    }
});
console.log(obj);
obj.abc();// abc

原型链属性是不可以被修改描述对象的。
configurable是false，不能删除该属性。

Object.defineProperties()

定义对象的多个属性，属性名称可以加引号，也可以不加引号，效果是一样的。

var obj={a:1,b:2}
Object.defineProperties(obj,{
    "c":{
        // 描述对象
        value:function(){
        }
    },
    d:{
        // 描述对象
        value:10,
        writable:true
    },
    e:{
        value:20,
        writable:true,
        configurable:true
    },
    f:{
        value:30,
        enumerable:true
    }
});
console.log(obj);

Object.freeze()

冻结对象，使用该方法以后，不能修改该对象的所有属性，不能删除所有属性，也不能重新设置属性的描述对象。

var obj={a:1,b:2};
Object.defineProperty(obj,"c",{
    value:3
})
Object.freeze(obj);
// 冻结的对象不能删除，重新设置属性，也不能重新设置属性的描述对象
obj.a=10;//没有作用
delete obj.a;//没有作用
//当使用Object.defineProperty()设置属性的描述对象时，会报错
Object.defineProperty(obj,"a",{
    configurable:true,
    writable:true,
    enumerable:true,
    value:10
})
console.log(obj);

可以将冻结的对象设置成null。

var obj={a:1,b:2};
Object.freeze(obj);
obj=null;
console.log(obj);//null

可以用作复制，并且复制后的属性是可以删除和修改的。

var obj={a:1,b:2};
Object.freeze(obj);
var obj1=Object.assign({},obj);
obj1.a=10;
console.log(obj1);//{a:10,b:2}

当使用Object.create() 创建时，首先判断对象有没有原型属性，如果有，还需要看该原型属性是否冻结，如果冻结则不能增加同名的对象属性。

var obj={a:1,b:2};
Object.freeze(obj);
var obj1=Object.create(obj);
obj1.a=10;
obj1.c=10;
console.log(obj1);//{c:10}

Object.getOwnPropertyNames()

获取对象下所有属性的名称，包括不可枚举属性，不包括__proto__，把所有的属性名放在一个数组中返回。
该数组的内容就是这些属性名，该数组对元素是 obj 自身拥有的枚举或不可枚举属性名称字符串。 数组中枚举属性的顺序与通过 for…in 循环（或 Object.keys）迭代该对象属性时一致。 数组中不可枚举属性的顺序未定义。
Object.keys()，只能获取可枚举属性。

var obj={a:1,b:2}
Object.defineProperties(obj,{
    e:{
        value:20,
        writable:true,
        configurable:true
    }
});
var arr=Object.getOwnPropertyNames(obj);
console.log(arr);//["a","b","e"]

Object.getOwnPropertyDescriptor()

获取对象下属性的描述，也就是使用Object.defineProperty定义的所有属性的描述内容。

var obj={a:1,b:2}
Object.defineProperties(obj,{
    e:{
        value:20,
        writable:true,
        configurable:true
    }
});
var desc=Object.getOwnPropertyDescriptor(obj,"e");
console.log(desc);
//{value: 20, writable: true, enumerable: false, configurable: true}

Object.is()

Object.is(value1, value2)，判断两个对象或者两个内容是否相等，这种相等性判断逻辑等同于运算符 === ，唯一一个不一样的是 Object.is(NaN,NaN)的结果为 true，其他的都跟 === 结果一致。

var a=3;
var b=new Number(3);//创造一个数值型对象
var c=Number(3);//强制转换为数值3
console.log(Object.is(a,b));//false
console.log(Object.is(a,c));//true
console.log(Object.is([],[]));//false
console.log(NaN===NaN);//false
console.log(Object.is(NaN,NaN));//true

Object.isFrozen()

判断该对象是否被冻结。

var obj={a:1};
Object.freeze(obj);
console.log(Object.isFrozen(obj));//true

Object.isExtensible()

判断一个对象是否是可扩展的（是否可以在它上面添加新的属性）跟Object.isFrozen() 的结果相反。

var obj={a:1};
Object.freeze(obj);
console.log(Object.isExtensible(obj));//false

对象的操作方法（动态方法/原型方法）

hasOwnProperty()

• hasOwnProperty() 方法会返回一个布尔值，指示对象是否具有指定的属性作为自身（不继承）属性。
• in判断属性是否是对象属性时，只要是该对象的原型属性和对象属性都可以确定。

let obj={a:1,b:2};
console.log(obj.hasOwnProperty("a"));//true
console.log(obj.hasOwnProperty("b"));//true
var obj1=Object.create(obj);
console.log(obj1);
console.log(obj1.hasOwnProperty("a"));//false,原型属性不是当前对象的对象属性
console.log("a" in o);//true,in判断属性是否是对象属性时，只要是该对象的原型属性和对象属性都可以确定

isPrototypeOf()

isPrototypeOf() 方法用于测试一个对象是否存在于另一个对象的原型链上。

let obj={a:1,b:2};
var obj1=Object.create(obj);
obj1.a=10;
var obj2=Object.create(obj1);
obj2.a=20;
console.log(obj.isPrototypeOf(obj1));//true,obj是o对象的原型
console.log(obj.isPrototypeOf(obj2));//true,obj是不是o1的原型链中的一个
console.log(obj1,obj2);//打印的结果如下

isPrototypeOf() 方法也可以用来判断一个类是否是另一个类的父类。

class Box{
    a=3;
    constructor(){

    }
}
class Ball extends Box{
    b=10;
    constructor(){

    }
}
class Rect extends Ball{
    c=20;
    constructor(){

    }
}
console.log(Box.isPrototypeOf(Rect));//true
console.log(Ball.isPrototypeOf(Rect));//true

propertyIsEnumerable()

propertyIsEnumerable() 方法返回一个布尔值，表明指定的属性名是否是当前对象可枚举的自身属性（枚举就是用for in可以罗列出来的属性）。

let obj={a:1,b:2}
Object.defineProperty(obj,"b",{
    value:10
});
var names=Object.getOwnPropertyNames(obj);
for(var i=0;i<names.length;i++){
    if(obj.propertyIsEnumerable(names[i])){
        console.log(names[i]+"是可枚举属性");
    }else{
        console.log(names[i]+"不是可枚举属性");
    }
}
//a是可枚举属性 b不是可枚举属性

constructor

• constructor 就是该对象的类型或者叫做构造函数。
• 用来判断该对象是否属于某个超类。
• 是一个属性，返回一个指向创建了该对象原型的函数引用。需要注意的是，该属性的值是那个函数本身，而不是一个包含函数名称的字符串。对于原始值（如1，true 或 “test”），该属性为只读。

var o={};
console.log(o.constructor===Object);//true
var a=[];
console.log(a.constructor===Array);//true
var n=4;
console.log(n.constructor===Number);//true

function Tree(name) {
	this.name=name;
}
var theTree=new Tree("big");
console.log(theTree.constructor===Tree)；//true

function Fn1() {};
var f1 = new Fn1();
console.log(f1.constructor === Fn1); //true

//替换默认原型
function Fn2() {};
Fn2.prototype = {};
var f = new Fn2();
console.log(f.constructor === Fn2); //false
console.log(f.constructor === Object); //true