Магический объект.defineProperty

внешний интерфейс JavaScript Vue.js

Этот метод удивителен. . И vue.js, и avalon.js реализуют через него двустороннюю привязку. . И Object.observe также был отозван спонсором проекта. . Таким образом, defineProperty более необходим для понимания нескольких строк кода, чтобы увидеть, как он используется. Первый раз писать статью, статья чужая, потренируйтесь руками.

 var a= {}
    Object.defineProperty(a,"b",{
      value:123
    })
console.log(a.b);//123

Очень просто, он принимает три параметра, и все они обязательны. .

Входящие параметры

Первый параметр: целевой объект

Второй параметр: имя свойства или метода, который необходимо определить.

Третий аргумент: свойства, принадлежащие целевому свойству. (дескриптор)

Первые два параметра много говорят, посмотрите на код, чтобы понять, в основном, чтобы увидеть дескриптор третьего параметра, посмотреть, какое значение

descriptor

записываемый: если false, значение свойства не может быть переопределено, только для чтения

настраиваемый: общий переключатель, когда-то ложный, больше не может устанавливать свое (значение, доступное для записи, настраиваемое)

enumerable: может ли он быть пройден в цикле for...in или указан в Object.keys.

получить: я уточню через некоторое время

ЗАДАВАТЬ:

значение дескриптора по умолчанию

Давайте снова посмотрим на первый пример

var a= {}
Object.defineProperty(a,"b",{
  value:123
})
console.log(a.b);//123

Мы только устанавливаем значение, и больше ничего, но можно просто понять (пока), что это поможет нам установить по умолчанию доступные для записи, настраиваемые и перечисляемые. Все установлены на значение, и значение по-прежнему ложно. . То есть приведенный выше код эквивалентен следующему (только когда он установлен в первый раз)

var a= {}
Object.defineProperty(a,"b",{
  value:123,
  writable:false,
  enumerable:false,
  configurable:false
})
console.log(a.b);//123

Вышесказанное очень важно. . И приведенное выше понимание не работает для установки и получения

configurable

Для главного переключателя после первой установки false второй раз ничего установить нельзя, например

var a= {}
Object.defineProperty(a,"b",{
  configurable:false
})
Object.defineProperty(a,"b",{
  configurable:true
})
//error: Uncaught TypeError: Cannot redefine property: b

就会报错了。 .注意上面讲的默认值。 . .如果第一次不设置它会怎样。 .会帮你设置为false。 . так. . второй раз.再设置他会怎样？ . .对喽，，会报错

writable

Если установлено значение fasle, оно становится доступным только для чтения. .

var a = {}; 
Object.defineProperty(a, "b", { 
    value : 123,
    writable : false });
console.log(a.b); // 打印 37
a.b = 25; // 没有错误抛出（在严格模式下会抛出，即使之前已经有相同的值）
console.log(a.b); // 打印 37， 赋值不起作用。

enumerable

Атрибут свойства enumerable определяет, могут ли свойства объекта быть перечислены в циклах for...in и Object.keys() .

var a= {}
Object.defineProperty(a,"b",{
  value:3445,
  enumerable:true
})
console.log(Object.keys(a));// 打印["b"]

изменить на ложь

var a= {}
Object.defineProperty(a,"b",{
  value:3445,
  enumerable:false //注意咯这里改了
})
console.log(Object.keys(a));// 打印[]

Установить и получить, два из них используются,

var a= {}
Object.defineProperty(a,"b",{
  set:function(newValue){
    console.log("你要赋值给我,我的新值是"＋newValue)
    },
  get:function(){
    console.log("你取我的值")
    return 2 //注意这里，我硬编码返回2
   }
})
a.b =1 //打印 你要赋值给我,我的新值是1
console.log(a.b)    //打印 你取我的值
                    //打印 2    注意这里，和我的硬编码相同的

这就是实现 observe的关键啊。 .下一篇，，我会分析vue的observe的实现源码，聊聊自己如何一步一步实现$watch

var a = {
  b: {
    c:1
  },
  d:1

}
a.$watch("b.c",()=>console.log("哈哈哈"))
Категории