js中Object的各项原生方法的集合

在js中一个Object可能是一组数据,一个组件,一个页面,一个项目,创建一个Object之后,是有一些内置的原生方法可以使用来管理整个Object里的所有内容的。

Object的各项原生方法:

js中直接使用Object.xxx来调用内置的方法,其中包括了对内部数据的增删改查、可遍历,获取状态,修改状态等进行配置,以及对这些配置进行限制和获取这些配置项的方法。

var obj = {
    name: 'obj_000',
    type: 'object',
    local: 'first',    
}

// 数据属性描述符,value,writable, configurable, enumerable属性
Object.defineProperty(obj, "index", {})

// 存取属性描述符, 不可使用value,writable属性,增加get(获取),set(编辑)两个函数
Object.defineProperty(obj, "index", {
    get: function() {

    },
    set: function (value) {
        
    }
})

// 批量设置属性描述符, 每个属性一个Object来配置
Object.defineProperties(obj, {
    name: {},
    type: {},
    local: {}
})

// 禁止对象继续添加新的属性
Object.preventExtensions(obj)

// 让属性不可以修改(writable: false)
Object.freeze(obj)

// 禁止对象配置和删除里面的属性
Object.seal(obj)

// 获取对象的属性描述符
Object.getOwnPropertyDescriptors(obj)
Object.getOwnPropertyDescriptors(obj, "name")

// 获取对象原型
Object.getPrototypeOf(obj)

各项原生方法的配置项:

配置Object中方法分为:批量配置和单个配置,也可以分为:数据属性描述和存取属性描述,可以根据不同的场景需求来使用。

1、数据属性描述符
var obj = {
   name: 'obj_000',
   type: 'object',
   local: 'first',    
}

// defineProperty方法会修改传入的对象
Object.defineProperty(obj, "index", {
   value: "1" , // 默认值undefined,设置属性值
   configurable: true, // 默认值false,是否可以删除
   enumerable: true, // 默认值false,是否是可以遍历
   writable: true // 默认值false,否是可以赋值
})

// 1、configurable设置false则无法删除
delete obj.index;
console.log(obj);


// 2、enumerable设置false则遍历不出来index
for (const k in obj) {
   console.log(obj[k]);
}

// 3、writable设置为false则无法给index赋值或修改数据
obj.index = '广州'
console.log(obj.index);


2、存取属性描述符
var obj = {
    name: 'obj_000',
    type: 'object',
    local: 'first',
    index: '0',
    index1: "1"
}

Object.defineProperty(obj, "index1", {
    enumerable: true, // 默认值false,是否是可以遍历
    configurable: true, // 默认值false,是否可以删除
    get: function() { // 获取该属性
        return this.index
    },
    set: function(value) { // 修改该属性     
        this.index = value
        foo()
        // vue2数据响应的方法,当index1被修改时index的数据也会做相同的变更
    }
})

obj.index1 = "3"
console.log(obj);

function foo() {
    console.log('响应了index的数据!');
}

3、批量设置属性描述符
var obj = {
    name: 'obj_000',
    type: 'object',
    local: 'first',
    _index: '0'   
}

Object.defineProperties(obj, {
    name: {
        configurable: true, // 默认值false,是否可以删除
        enumerable: true, // 默认值false,是否是可以遍历},
    },
    type: {
        configurable: false, // 默认值false,是否可以删除
        enumerable: false, // 默认值false,是否是可以遍历
        writable: false // 默认值false,否是可以赋值
    },
    local: {
        configurable: true, // 默认值false,是否可以删除
        enumerable: true, // 默认值false,是否是可以遍历},
    },
    index: {
        configurable: true,
        enumerable: true,
        get: function() {
          return this._index
        },
        set: function(value) {
          this._index = value
        }
    }
})

obj.type = "object1"
obj.name = "obj_001"

console.log("1、type:",obj.type, '2、name:', obj.name);
// 1、type: object 2、name: obj_001


for (const k in obj) {
    console.log(obj[k]);
    // obj_001
    // first
    // 0
    // 0
}

obj.index = 1
console.log(obj.index, obj._index); // 1 1
3、设置和调用Object原型链
function test(name, local) {
    this.name = name
    this.local = local
}

test.prototype.thing = function () {
    console.log(this.name+ "住在" + this.local);
}

var test1 = new test("张三", "昆明")
var test2 = new test("李四", "成都")

test1.thing() // 张三住在昆明
test2.thing() // 李四住在成都

console.log(test1);
3、原型链继承的封装
function Parent() {
    this.isName = 'Parent'
}
Parent.prototype.thing = function (value) {
   console.log(this.isName +"正在"+ value);
}

function inheritPrototype(ParentData, SubData) {
    function Fn() {}
    Fn.prototype = ParentData.prototype
    SubData.prototype = new Fn
    // SubData.prototype = Object.create(ParentData.prototype)
    Object.defineProperty(SubData.prototype, "constructor", {
        enumerable: false,
        configurable: true,
        writable: true,
        value: SubData
    })
}

function Sub() {
    this.isName = 'Sub'
}

inheritPrototype(Parent, Sub)

var s1 = new Parent
var s2 = new Sub

s1.thing('跑步') // Parent正在跑步
s2.thing('爬山') // Sub正在爬山
4、原型链属性判断的方法
var obj = {
  egg: "3",
}

var p1 = Object.create(obj, {
  address: {
    value: "sz"
  }
})

function foo() {
  
}

var p2 = new foo

// hasOwnProperty方法判断是否是自己原型上的属性
console.log(p1.hasOwnProperty("address")) // true
console.log(p1.hasOwnProperty("egg")) // false

// in 操作符: 不管在当前对象还是原型中返回的都是true
console.log("address" in p1) // true
console.log("egg" in p1) // true


// 返回整个原型对象
console.log(Object.getOwnPropertyDescriptors(foo.prototype))

// 构造函数的原型是否出现在实例对象的原型链上
console.log(p2 instanceof foo) // true
console.log(p1 instanceof foo) // false

5、继承内置类和混入
// 继承内置类
class HYArray extends Array {
  firstItem() {
    return this[0]
  }

  lastItem() {
    return this[this.length-1]
  }
}

var arr = new HYArray(1, 2, 3)
console.log(arr.firstItem())
console.log(arr.lastItem())
// 混入
class Person {

}

function mixinRunner(BaseClass) {
  class NewClass extends BaseClass {
    running() {
      console.log("running~")
    }
  }
  return NewClass
}

function mixinEater(BaseClass) {
  return class extends BaseClass {
    eating() {
      console.log("eating~")
    }
  }
}

// 在JS中类只能有一个父类: 单继承
class Student extends Person {

}

var NewStudent = mixinEater(mixinRunner(Student))
var ns = new NewStudent()
ns.running()
ns.eating()
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容