js Object 所有知识点汇总

在js中所有对象都是Object,可以说他是js的灵魂+核心,几乎所有js数据类型的问题往上倒三代必然就会面对它,es6新语法也是着重在object上进行了扩展,另外目前流行的vue,react,angular框架基本上都引用到object的新方法,本文就Object灵魂三问:Object是什么?Object有哪些属性方法?Object这些属性方法怎么用?做一个全面的整理总结:

js中Object的定义

首先我们必须对Object和Object()做区分;

1.Object是原型对象,它来自于 new Object()。
在这里插入图片描述
作为原形对象所具有的属性方法:
在这里插入图片描述

  1. Object()是构造函数创建一个对象包装器。本质上就是原型对象的构造函数

在这里插入图片描述

作为对象包装器所具有的属性和方法:

在这里插入图片描述

3.当以非构造函数形式被调用时,Object 等同于 new Object()。即
var o = Object() 和var o = Object 效果是一样的。

所以以上我们仅仅只是为了说明这两者之间是有区别的,但在实际使用中作为构造函数使用的情况更多(传不同的实现不同对象),所以本文更多细节是关于Object()的。

语法

// 对象初始化器(Object initialiser)或对象字面量(literal)
{ [ nameValuePair1[, nameValuePair2[, ...nameValuePairN] ] ] }

// 以构造函数形式来调用
new Object([value])

Object的属性

1. Object.length

Object.length 值为1,该属性基本没有什么用处。

2. Object.prototype

可以为所有 Object 类型的对象添加属性。例如我们给所有原型对象加一个console方法

    let o = Object;
    let oj = new Object;

    let obj = {
        name:"cc",
        age:25,
        do:function(str){
            console.log(`我是${this.name},我在${str}`)
        }
    }
    let arry = new Array();

    //length属性
    console.log(Object.length);
    //prototyp属性
    Object.prototype.sayHello=function(){
        console.log("你好,世界!")
    }

    obj.sayHello();
    o.sayHello();
    oj.sayHello();
    arry.sayHello();

在这里插入图片描述
因为所有对象都继承与Object所以所有定义的对象都具有sayHello()方法。

要为原型对象扩展方法或者属性就必须在prototype上,只有这样其他所有继承自Object的对象实例才能共有这个方法,这也是js实现继承的根基。

Object.sd = function (){
        console.log("sd");
    }
    Object.sd();
    obj.sd();
    o.sd();
    oj.sd();
    arry.sd();

在这里插入图片描述

Object 构造函数的方法

1. Object.assign()

定义:通过复制一个或多个对象来创建一个新的对象。方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

语法:Object.assign(target, ...sources)

参数 target目标对象。ources源对象。


    let cc1 = {
        name:"cc",
        age:25
    }
    let cc2 = {
        job:"programmer",
        do:function(){
            console.log("你好!")
        }
    }

    let cc = Object.assign(cc1,cc2);
    console.log(cc1);
    console.log(cc2);
    console.log(cc);
    console.log(cc === cc1)

在这里插入图片描述

2. Object.create()

定义 :使用指定的原型对象和属性创建一个新对象。使用现有的对象来提供新创建的对象的__proto__。
语法Object.create(proto[, propertiesObject])
参数:proto新创建对象的原型对象。
propertiesObject可选。如果没有指定为 undefined,则是要添加到新创建对象的不可枚举(默认)属性(即其自身定义的属性,而不是其原型链上的枚举属性)对象的属性描述符以及相应的属性名称。这些属性对应Object.defineProperties()的第二个参数。

实例:1用Object.creat()实现继承

   let Person = function(name,age){
        this.name = name;
        this.age = age;
    }
    Person.prototype.do = function(str){
        console.log(`我是${this.name},我在${str}`)
    }
    let CC = function(name,age){
        Person.call(this,name,age);
    }
    CC.prototype = Object.create(Person.prototype);
    CC.prototype.construct = CC;

    let cc = new CC('cc',25);
    console.log(cc);

2.用Objec.create()创建新对象;

 let Person = function(name,age){
        this.name = name;
        this.age = age;
    }
    let per = new Person("xx",22);
    let personB = Object.create(per);
    console.log(personB)

在这里插入图片描述
注意:新对象的_proto_上挂载被复制对象的方法属性。

3.Object.defineProperty()

定义:给对象添加一个属性并指定该属性的配置。方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。

语法Object.defineProperty(obj, prop, descriptor)

参数
obj
要在其上定义属性的对象。
prop
要定义或修改的属性的名称。
descriptor
将被定义或修改的属性描述符。

实例

 let o = {};
    Object.defineProperty(o, "name", {
        value : "cc",
        writable : false,
        enumerable : false,
        configurable : false
    });
    o.name = "g"
    console.log(o)
    console.log(o.name)//cc

configurable
当且仅当该属性的 configurable 为 true 时,该属性描述符才能够被改变,同时该属性也能从对应的对象上被删除。默认为 false。
enumerable
当且仅当该属性的enumerable为true时,该属性才能够出现在对象的枚举属性中。默认为 false。
writable
当且仅当该属性的writable为true时,value才能被赋值运算符改变。默认为 false。
注意:在ES6中,由于 Symbol类型的特殊性,用Symbol类型的值来做对象的key与常规的定义或修改不同,而Object.defineProperty 是定义key为Symbol的属性的方法之一。

4.Object.defineProperties()

给对象添加多个属性并分别指定它们的配置。用法与3相同

实例:

 let o = {};
    Object.defineProperties(o, {"name": {
        value : "cc",
        writable : false,
        enumerable : false,
        configurable : false
    },
    "age":{
        value : 25,
        writable : false,
        enumerable : false,
        configurable : false
    }});    
    o.name = "g"
    console.log(o)
    console.log(o.name)

5.Object.entries()

方法返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for…in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环还会枚举原型链中的属性)。
实例:


    let obj = {
        name:"cc",
        age:25,
        do:function(str){
            console.log(`我是${this.name},我在${str}`)
        }
    }
    console.log(Object.entries(obj))

在这里插入图片描述

6.Object.freeze()

冻结对象:其他代码不能删除或更改任何属性。
方法可以冻结一个对象。一个被冻结的对象再也不能被修改;冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性、可配置性、可写性,以及不能修改已有属性的值。此外,冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。

实例

 let obj = {
        name:"cc",
        age:25,
        do:function(str){
            console.log(`我是${this.name},我在${str}`)
        }
    }
    // console.log(Object.entries(obj))
    var o = Object.freeze(obj);
    o === obj; // true
    Object.isFrozen(obj); // === true

    o.name = "gg"
    console.log(o)

7.Object.getOwnPropertyDescriptor()

返回对象指定的自有属性配置。自有属性指的是直接赋予该对象的属性,不需要从原型链上进行查找的属性

语法
Object.getOwnPropertyDescriptor(obj, prop)
参数
obj
需要查找的目标对象
prop
目标对象内属性名称

实例

let obj = {
        name:"cc",
        age:25,
        do:function(str){
            console.log(`我是${this.name},我在${str}`)
        }
    }

    let d = Object.getOwnPropertyDescriptor(obj, "do");
    console.log(d)

在这里插入图片描述

8.Object.getOwnPropertyNames()

返回一个数组,它包含了指定对象所有的可枚举或不可枚举的属性名。方法返回一个由指定对象的所有自身属性的属性名(包括不可枚举属性但不包括Symbol值作为名称的属性)组成的数组。

实例

 let obj = {
        name:"cc",
        age:25,
        do:function(str){
            console.log(`我是${this.name},我在${str}`)
        }
    }
    console.log(Object.getOwnPropertyNames(obj));

在这里插入图片描述

9.Object.getOwnPropertySymbols()

返回一个数组,它包含了指定对象自身所有的符号属性。

实例

var a = Symbol("a");
    var b = Symbol.for("b");

    obj[a] = "localSymbol";
    obj[b] = "globalSymbol";

    var objectSymbols = Object.getOwnPropertySymbols(obj);
    console.log(objectSymbols);

在这里插入图片描述

10.Object.getPrototypeOf()

返回指定对象的原型对象。内部[[Prototype]]属性的值。

var proto = {};
var obj = Object.create(proto);
Object.getPrototypeOf(obj) === proto; // true

11.Object.is()

比较两个值是否相同。所有 NaN 值都相等(这与=不同)。

语法
Object.is(value1, value2);
参数
value1
第一个需要比较的值。
value2
第二个需要比较的值。
返回值
表示两个参数是否相同的布尔值 。

Object.is() 判断两个值是否相同。如果下列任何一项成立,则两个值相同:

  • 两个值都是 undefined
  • 两个值都是 null
  • 两个值都是 true 或者都是 false
  • 两个值是由相同个数的字符按照相同的顺序组成的字符串
  • 两个值指向同一个对象
  • 两个值都是数字并且
  • 都是正零 +0
  • 都是负零 -0
  • 都是 NaN
  • 都是除零和 NaN 外的其它同一个数字
    注意
    这种相等性判断逻辑和传统的 == 运算不同,== 运算符会对它两边的操作数做隐式类型转换(如果它们类型不同),然后才进行相等性比较,(所以才会有类似 “” == false 等于 true 的现象),但 Object.is 不会做这种类型转换。
    这与 === 运算符的判定方式也不一样。=== 运算符(和== 运算符)将数字值 -0 和 +0 视为相等,并认为 Number.NaN 不等于 NaN。
var foo = { a: 1 };
var bar = { a: 1 };
Object.is(foo, foo);         // true
Object.is(foo, bar);         // false

Object.is(null, null);       // true

// 特例
Object.is(0, -0);            // false
Object.is(0, +0);            // true
Object.is(-0, -0);           // true
Object.is(NaN, 0/0);         // true

12.Object.isExtensible()

判断对象是否可扩展。默认情况下,对象是可扩展的:即可以为他们添加新的属性。以及它们的 proto 属性可以被更改。Object.preventExtensions,Object.seal 或 Object.freeze 方法都可以标记一个对象为不可扩展(non-extensible)

语法
Object.isExtensible(obj)
参数
obj
需要检测的对象
返回值
表示给定对象是否可扩展的一个Boolean 。

// 密封对象是不可扩展的.
var sealed = Object.seal({});
Object.isExtensible(sealed); // === false

// 冻结对象也是不可扩展.
var frozen = Object.freeze({});
Object.isExtensible(frozen); // === false

13.Object.isFrozen()

判断对象是否已经冻结。一个对象是冻结的是指它不可扩展,所有属性都是不可配置的,且所有数据属性(即没有getter或setter组件的访问器的属性)都是不可写的。

语法
Object.isFrozen(obj)
参数
obj
被检测的对象。
返回值
表示给定对象是否被冻结的Boolean。

// 使用Object.freeze是冻结一个对象最方便的方法.
var frozen = { 1: 81 };
Object.isFrozen(frozen) //=== false
Object.freeze(frozen);
Object.isFrozen(frozen) //=== true

// 一个冻结对象也是一个密封对象.
Object.isSealed(frozen) //=== true

// 当然,更是一个不可扩展的对象.
Object.isExtensible(frozen) //=== false

14.Object.isSealed()

判断对象是否已经密封。密封对象是指那些不可 扩展 的,且所有自身属性都不可配置且因此不可删除(但不一定是不可写)的对象。

15.Object.keys()

返回一个包含所有给定对象自身可枚举属性名称的数组,返回一个所有元素为字符串的数组,其元素来自于从给定的object上面可直接枚举的属性。这些属性的顺序与手动遍历该对象属性时的一致。

例子

   let obj = {
        name:"cc",
        age:25,
        do:function(str){
            console.log(`我是${this.name},我在${str}`)
        }
    }
    console.log(Object.keys(obj));

在这里插入图片描述

16.Object.preventExtensions()

防止对象的任何扩展。
如果一个对象可以添加新的属性,则这个对象是可扩展的。Object.preventExtensions()将对象标记为不再可扩展,因此它将永远不会具有超出它被标记为不可扩展的属性。注意,一般来说,不可扩展对象的属性可能仍然可被删除。尝试将新属性添加到不可扩展对象将静默失败或抛出TypeError(最常见但不排除其他情况,如在strict mode中)。

Object.preventExtensions()仅阻止添加自身的属性。但属性仍然可以添加到对象原型。

一旦使其不可扩展,就无法再对象进行扩展。

17. Object.seal()

防止其他代码删除对象的属性。封闭一个对象,阻止添加新属性并将所有现有属性标记为不可配置。当前属性的值只要原来是可写的就可以改变。

通常,一个对象是可扩展的(可以添加新的属性)。密封一个对象会让这个对象变的不能添加新属性,且所有已有属性会变的不可配置。属性不可配置的效果就是属性变的不可删除,以及一个数据属性不能被重新定义成为访问器属性,或者反之。但属性的值仍然可以修改。尝试删除一个密封对象的属性或者将某个密封对象的属性从数据属性转换成访问器属性,结果会静默失败或抛出TypeError(在严格模式 中最常见的,但不唯一)。

不会影响从原型链上继承的属性。但 proto ( ) 属性的值也会不能修改。

返回被密封对象的引用。

18.Object.setPrototypeOf()

设置对象的原型(即内部 [[Prototype]] 属性)。
如果对象的[[Prototype]]被修改成不可扩展(通过 Object.isExtensible()查看),就会抛出 TypeError异常。如果prototype参数不是一个对象或者null(例如,数字,字符串,boolean,或者 undefined),则什么都不做。否则,该方法将obj的[[Prototype]]修改为新的值。

Object.setPrototypeOf()是ECMAScript 6最新草案中的方法,相对于 Object.prototype.proto ,它被认为是修改对象原型更合适的方法

语法
Object.setPrototypeOf(obj, prototype)
参数
obj
要设置其原型的对象。.
prototype
该对象的新原型(一个对象 或 null).

Object.prototype 上的方法

1.Object.prototype.hasOwnProperty()

返回一个布尔值 ,表示某个对象是否含有指定的属性,而且此属性非原型链继承的。

语法
obj.hasOwnProperty(prop)
参数
prop
要检测的属性的 String 字符串形式表示的名称,或者 Symbol。
返回值
用来判断某个对象是否含有指定的属性的布尔值 Boolean。

o = new Object();
o.prop = 'exists';
o.hasOwnProperty('prop');             // 返回 true
o.hasOwnProperty('toString');         // 返回 false
o.hasOwnProperty('hasOwnProperty');   // 返回 false

2.Object.prototype.watch() (尚未成为标准但很有用要了解)

给对象的某个属性增加监听。

语法
obj.watch(prop, handler)
参数
prop
想要监视值是否发生变化的指定对象的某个属性的属性名称
handler
当指定的属性发生变化时执行的回调函数
返回值
undefined.

监视对指定对象的名为 prop 属性的赋值操作,只要 prop 属性被赋值,便调用 handler(prop, oldval, newval) 回调函数,并将函数返回值保存到该属性。 通过返回修改的新值(或者返回旧值),一个监视点可以过滤(或使之为 null )赋值。

如果你删除某个设置监视点的属性,该监视点并不会消失。如果你之后重新创建这个属性,监视点仍然有效。

要移除某个监视点,使用 unwatch() 方法。默认所有 Object 的后代都将继承 watch 方法。

在这里插入图片描述

发布了77 篇原创文章 · 获赞 8 · 访问量 6864
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章