【JS】Object.defineProperty

1.创建对象

创建对象:

var o = new Object();
o.name = "John";
o.age = 20;
o.sayHello = function(){
  console.log(this.name);
}

以上是我们创建对象的一种方式,通常我们通过字面量的形式创建对象。

var o = {
  name: "John",
  age:20,
  sayHello: function() {
    console.log(this.name);
  }
}

2.对象特性

每个对象在创建时他们的属性都有一些特性

(一) 数据属性

数据属性包含4个特性,顾名思义,这些特性跟数据有关。
Configurable: 能否改变对象的属性,比如删除、修改,默认为true
Enumerable:能否通过for-in遍历属性,默认为true
Writable:能否修改属性的值,默认为true
Value:这个属性的值,默认为undefined

要修改这些特性的值,我们需要用到**Object.defineProperty()**方法,举个例子:

var o = {
  name: "John",
  age:20,
  sayHello: function() {
    console.log(this.name);
  }
}
Object.defineProperty(o, "name", {
  writable: false,
  value: "Mike"
})
o.name = "Lucy";
console.log(o);		// { name: 'Mike', age: 20, sayHello: [Function: sayHello] }

对于configurable这个特性,如果我们把它修改为false后就不能再修改了。

var o = {
  name: "John",
  age:20,
  sayHello: function() {
    console.log(this.name);
  }
}
Object.defineProperty(o, "name", {
  writable: false,
  value: "Mike"
})
o.name = "Lucy";
Object.defineProperty(o, "name", {
  configurable: false,
  value: "Mik"
})
Object.defineProperty(o, "name", {
  configurable: true,
  value: "Mike"
})
// 抛出错误 TypeError: Cannot redefine property: name
(二) 访问器属性

这个属性也有四个特性,主要在与set和get特性,比如在读取属性是,会调用getter函数,返回最终值,写入时会调用setter函数,在函数中处理后设值。

Configurable: 能否改变对象的属性,比如删除、修改,默认为true
Enumerable:能否通过for-in遍历属性,默认为true
Get: 读取时调用的函数,默认为undefined
Set: 写入时调用的函数,默认为undefined

var o = {
  _age: 20
}

Object.defineProperty(o, "age", {
  get: function() {
    return this._age;
  },
  set: function(newAge) {
    if(newAge > 30) {
      this._age = newAge;
    }
  }
})

o.age = 23;
console.log(o.age)		// 20

3.定义多个属性

我们可以通过Object.defineProperties()定义多个属性

var o = {};
Object.defineProperties(o, {
  _name: {
    value: "John"
  },

  age: {
    value: 20
  },

  name: {
    get: function() {
      return this._name
    }
  }
})

猜你喜欢

转载自blog.csdn.net/jzq950522/article/details/88244791
今日推荐