js达成双向绑定的规律,方法的未知解

菜菜: “老大,那三个, Object.defineProperty 是怎么着鬼?”

1、二种实现双向绑定的做法

脚下三种主流的mvc(vm)框架都完毕了单向数据绑定,而自身所知晓的双向数据绑定无非正是在一边绑定的底子上给可输入成分(input、textare等)增添了change(input)事件,来动态修改model和
view,并不曾多高深。所以没有需求太过介怀是落到实处的单向或双向绑定。

兑现数据绑定的做法有大要如下两种:

公布者-订阅者格局(backbone.js)

脏值检查(angular.js) 

数量威迫(vue.js)

揭橥者-订阅者情势: 一般经过sub,
pub的方式实现数据和视图的绑定监听,更新数据格局一般做法是 vm.set('property', value),这里有篇小说讲的相比详细,有意思味可点这里

这种格局现在毕竟太low了,大家更期望通过 vm.property = value这种艺术更新数据,同期自动更新视图,于是有了上边三种办法

脏值检查: angular.js
是经过脏值检查实验的秘籍比对数据是不是有改观,来支配是或不是更新视图,最轻便易行的章程便是因此 setInterval() 按时轮询检查评定数据变动,当然谷歌(Google)不会如此low,angular唯有在钦定的事件触发时进入脏值检查测试,大致如下:

  • DOM事件,比如用户输入文本,点击按键等。( ng-click )

  • XHRubicon响应事件 ( $http )

  • 浏览器Location更动事件 ( $location )

  • Timer事件( $timeout , $interval )

  • 执行 $digest() 或 $apply()

多少威胁: vue.js
则是使用数据恐吓结合发表者-订阅者格局的办法,通过Object.defineProperty()来威吓各种属性的settergetter,在多少变动时宣布新闻给订阅者,触发相应的监听回调。

原文

比如大家有个对象 user ; 大家要给它扩张壹特性能 name , 大家会如此做

2、Vue.js达成双向绑定的原理(Object.defineProperty())

目的是由四个名/值对构成的冬天的联谊。对象中种种属性对应大肆档次的值。
概念对象足以应用构造函数或字面量的款式:

var user = {};
user.name="狂奔的蜗牛";
console.log(user);//{name: "狂奔的蜗牛"}

核心:

var obj = new Object;  //obj = {}
obj.name = "张三";  //添加描述
obj.say = function(){};  //添加行为

借使想要扩张贰个sayHi方法叻?

Vue.js底层原理利用的是ES伍的getter和setter方法,通过 Object.defineProperty() 把实例属性全体转为 getter/setter。

除开以上增加属性的情势,还足以采用Object.defineProperty概念新属性或修改原有的习性

user.sayHi=function () { console.log("Hi !") };
console.log(user);//{name: "狂奔的蜗牛", sayHi: ƒn}

理解Object.defineProperty的作用

对象是由七个名/值对组合的冬日的聚焦。对象中种种属性对应任意档案的次序的值。
概念对象可以运用构造函数或字面量的款式:

var obj = new Object;  //obj = {}
obj.name = "张三";  //添加描述
obj.say = function(){};  //添加行为

除去上述增添属性的方法,还能使用Object.defineProperty概念新属性或退换原有的属性。

Object.defineProperty()

  • 语法:
    Object.defineProperty(obj, prop, descriptor)
  • 参数表达:

obj:必需。目标对象
prop:必需。需定义或改变的品质的名字
descriptor:必需。目的属性所独具的性状

  • 返回值:

流传函数的对象。即首先个参数obj

本着属性,大家得以给那个天性设置有个别天性,比方是或不是只读不得以写;是或不是足以被for..in或Object.keys()遍历。

给指标的属性增多性子描述,目前提供二种方式:数据描述和存取器描述。

Object.defineProperty正是做那个的

Object.defineProperty()

语法:

Object.defineProperty(obj, prop, descriptor)

参数表明:

obj:必需。目的对象 
prop:必需。需定义或退换的属性的名字
descriptor:必需。目的属性所所有的个性

返回值:

流传函数的对象。即首先个参数obj

针对属性,大家得以给这么些性子设置有个别特点,例如是还是不是只读无法写;是不是能够被for..inObject.keys()遍历。

数量描述

当修改或概念对象的某部属性的时候,给那特本性增添一些个性:

var obj = {
    test:"hello"
}
//对象已有的属性添加特性描述
Object.defineProperty(obj,"test",{
    configurable:true | false,
    enumerable:true | false,
    value:任意类型的值,
    writable:true | false
});
//对象新添加的属性的特性描述
Object.defineProperty(obj,"newKey",{
    configurable:true | false,
    enumerable:true | false,
    value:任意类型的值,
    writable:true | false
});

多少描述中的属性都以可选的,来看一下安装每1脾性质的效益。

那么Object.defineProperty
怎么用?

给目的的习性增多性子描述,方今提供二种样式:数据描述和存取器描述。

1. value

属性对应的值,能够使大肆等级次序的值,默以为undefined

var obj = {}
//第一种情况:不设置value属性
Object.defineProperty(obj,"newKey",{

});
console.log( obj.newKey );  //undefined
------------------------------
//第二种情况:设置value属性
Object.defineProperty(obj,"newKey",{
    value:"hello"
});
console.log( obj.newKey );  //
hello

Object.defineProperty 需求八个参数(object , propName , descriptor)

数量描述

当修改或概念对象的某部属性的时候,给这几个天性增添一些风味:

var obj = {
    test:"hello"
}
//对象已有的属性添加特性描述
Object.defineProperty(obj,"test",{
    configurable:true | false,
    enumerable:true | false,
    value:任意类型的值,
    writable:true | false
});
//对象新添加的属性的特性描述
Object.defineProperty(obj,"newKey",{
    configurable:true | false,
    enumerable:true | false,
    value:任意类型的值,
    writable:true | false
});

数据描述中的属性都以可选的,来看一下设置每一天性质的作用。

2. writable

质量的值是或不是能够被重写。设置为true能够被重写;设置为false,无法被重写。默以为false。

var obj = {}
//第一种情况:writable设置为false,不能重写。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false
});
//更改newKey的值
obj.newKey = "change value";
console.log( obj.newKey );  //hello

//第二种情况:writable设置为true,可以重写
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:true
});
//更改newKey的值
obj.newKey = "change value";
console.log( obj.newKey );  //change value

1 object 对象 => 给谁加
二 propName 属性名 => 要加的习性的名字 【类型:String】
三 descriptor 属性描述 => 加的那特性子有如何的特色【类型:Object】

value

品质对应的值,能够使率性档期的顺序的值,默以为undefined

var obj = {}
//第一种情况:不设置value属性
Object.defineProperty(obj,"newKey",{

});
console.log( obj.newKey );  //undefined
------------------------------
//第二种情况:设置value属性
Object.defineProperty(obj,"newKey",{
    value:"hello"
});
console.log( obj.newKey );  //hello

3. enumerable

此属性是或不是足以被枚举(使用for…in或Object.keys())。设置为true能够被枚举;设置为false,不能够被枚举。默以为false。

var obj = {}
//第一种情况:enumerable设置为false,不能被枚举。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false
});

//枚举对象的属性
for( var attr in obj ){
    console.log( attr );  
}
//第二种情况:enumerable设置为true,可以被枚举。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:true
});

//枚举对象的属性
for( var attr in obj ){
    console.log( attr );  //newKey
}

那么descriptor这几个是个对象 ,他有那几个属性呢 ? 别着急我们三个二个说;

writable

品质的值是或不是能够被重写。设置为true能够被重写;设置为false,不可能被重写。默以为false。

var obj = {}
//第一种情况:writable设置为false,不能重写。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false
});
//更改newKey的值
obj.newKey = "change value";
console.log( obj.newKey );  //hello

//第二种情况:writable设置为true,可以重写
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:true
});
//更改newKey的值
obj.newKey = "change value";
console.log( obj.newKey );  //change value

4. configurable

是否能够去除指标属性或是还是不是足以重新修改属性的性状(writable,
configurable,
enumerable)。设置为true能够被去除或能够另行设置特色;设置为false,不可能被能够被删除或无法再一次安装特色。默以为false。

这几个脾性起到多个作用:

  1. 对象属性是不是可以采用delete删除
  2. 对象属性是或不是足以重新载入参数特色
//-----------------测试目标属性是否能被删除------------------------
var obj = {}
//第一种情况:configurable设置为false,不能被删除。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:false
});
//删除属性
delete obj.newKey;
console.log( obj.newKey ); //hello

//第二种情况:configurable设置为true,可以被删除。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:true
});
//删除属性
delete obj.newKey;
console.log( obj.newKey ); //undefined

//-----------------测试是否可以再次修改特性------------------------
var obj = {}
//第一种情况:configurable设置为false,不能再次修改特性。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:false
});

//重新修改特性
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:true,
    enumerable:true,
    configurable:true
});
console.log( obj.newKey ); //报错:Uncaught TypeError: Cannot redefine property: newKey

//第二种情况:configurable设置为true,可以再次修改特性。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:true
});

//重新修改特性
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:true,
    enumerable:true,
    configurable:true
});
console.log( obj.newKey ); //hello

除了那一个之外能够给新定义的性质设置特色,也得以给已有些属性设置特色

//定义对象的时候添加的属性,是可删除、可重写、可枚举的。
var obj = {
    test:"hello"
}

//改写值
obj.test = 'change value';

console.log( obj.test ); //'change value'

Object.defineProperty(obj,"test",{
    writable:false
})


//再次改写值
obj.test = 'change value again';

console.log( obj.test ); //依然是:'change value'

提示:一旦选择Object.defineProperty给目的增多属性,那么只要不设置属性的表征,那么configurable、enumerable、writable这个值都为暗许的false

var obj = {};
//定义的新属性后,这个属性的特性中configurable,enumerable,writable都为默认的值false
//这就导致了neykey这个是不能重写、不能枚举、不能再次设置特性
//
Object.defineProperty(obj,'newKey',{

});

//设置值
obj.newKey = 'hello';
console.log(obj.newKey);  //undefined

//枚举
for( var attr in obj ){
    console.log(attr);
}

安装的性子总括:

value: 设置属性的值
writable: 值是还是不是足以重写。true | false
enumerable: 目的属性是还是不是足以被枚举。true | false
configurable: 指标属性是不是能够被删去或是还是不是足以另行修改性子 true |
false

既是能够给二个目的扩张质量,那么大家用它来做一下给 user增加name属性,代码是那样的

enumerable

此属性是不是足以被枚举(使用for…in或Object.keys())。设置为true能够被枚举;设置为false,无法被枚举。默以为false。

var obj = {}
//第一种情况:enumerable设置为false,不能被枚举。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false
});

//枚举对象的属性
for( var attr in obj ){
    console.log( attr );  
}
//第二种情况:enumerable设置为true,可以被枚举。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:true
});

//枚举对象的属性
for( var attr in obj ){
    console.log( attr );  //newKey
}

存取器描述

当使用存取器描述属性的性状的时候,允许设置以下特点属性:

var obj = {};
Object.defineProperty(obj,"newKey",{
    get:function (){} | undefined,
    set:function (value){} | undefined
    configurable: true | false
    enumerable: true | false
});

注意:当使用了getter或setter方法,分歧意行使writable和value这八个特性

 var user = {};
 Object.defineProperty(user,"name",{
  value:"狂奔的蜗牛"
 })
 console.log(user);//{name: "狂奔的蜗牛"}

configurable

是否能够去除目的属性或是不是足以另行修改属性的特性(writable,
configurable,
enumerable)。设置为true能够被剔除或能够重新载入参数特色;设置为false,不可能被能够被去除或不得以另行设置特色。默以为false。

以此本性起到五个效益:

  1. 对象属性是或不是足以应用delete删除

  2. 指标属性是不是足以另行设置特色

//-----------------测试目标属性是否能被删除------------------------
var obj = {}
//第一种情况:configurable设置为false,不能被删除。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:false
});
//删除属性
delete obj.newKey;
console.log( obj.newKey ); //hello

//第二种情况:configurable设置为true,可以被删除。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:true
});
//删除属性
delete obj.newKey;
console.log( obj.newKey ); //undefined

//-----------------测试是否可以再次修改特性------------------------
var obj = {}
//第一种情况:configurable设置为false,不能再次修改特性。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:false
});

//重新修改特性
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:true,
    enumerable:true,
    configurable:true
});
console.log( obj.newKey ); //报错:Uncaught TypeError: Cannot redefine property: newKey

//第二种情况:configurable设置为true,可以再次修改特性。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:true
});

//重新修改特性
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:true,
    enumerable:true,
    configurable:true
});
console.log( obj.newKey ); //hello

除去能够给新定义的属性设置特色,也足以给已有的属性设置特色

//定义对象的时候添加的属性,是可删除、可重写、可枚举的。
var obj = {
    test:"hello"
}

//改写值
obj.test = 'change value';

console.log( obj.test ); //'change value'

Object.defineProperty(obj,"test",{
    writable:false
})


//再次改写值
obj.test = 'change value again';

console.log( obj.test ); //依然是:'change value'

晋升:1旦选拔Object.defineProperty给指标增添属性,那么只要不设置属性的特点,那么configurable、enumerable、writable这一个值都为暗中同意的false

var obj = {};
//定义的新属性后,这个属性的特性中configurable,enumerable,writable都为默认的值false
//这就导致了neykey这个是不能重写、不能枚举、不能再次设置特性
//
Object.defineProperty(obj,'newKey',{

});

//设置值
obj.newKey = 'hello';
console.log(obj.newKey);  //undefined

//枚举
for( var attr in obj ){
    console.log(attr);
}

设置的风味总括:

value: 设置属性的值
writable: 值是不是足以重写。true | false
enumerable: 指标属性是或不是能够被枚举。true | false
configurable: 目的属性是或不是足以被剔除或是或不是足以重新修改性格 true |
false

getter/setter

当设置或得到对象的某部属性的值的时候,可以提供getter/setter方法。

  • getter 是①种获得属性值的方法

  • setter是一种设置属性值的办法。

在特点中央银行使get/set属性来定义对应的秘诀。

var obj = {};
var initValue = 'hello';
Object.defineProperty(obj,"newKey",{
    get:function (){
        //当获取值的时候触发的函数
        return initValue;    
    },
    set:function (value){
        //当设置值的时候触发的函数,设置的新值通过参数value拿到
        initValue = value;
    }
});
//获取值
console.log( obj.newKey );  //hello

//设置值
obj.newKey = 'change value';

console.log( obj.newKey ); //change value

注意:get或set不是必须成对现身,任写其一就足以。要是不安装方法,则get和set的暗中认可值为undefined

configurable和enumerable同地方的用法

表明 是的照旧可怜杰出的value品质,他就是安装属性值的。

存取器描述

当使用存取器描述属性的特点的时候,允许设置以下特征属性:

var obj = {};
Object.defineProperty(obj,"newKey",{
    get:function (){} | undefined,
    set:function (value){} | undefined
    configurable: true | false
    enumerable: true | false
});

留意:当使用了getter或setter方法,分歧意行使writable和value那四个脾性

等等,属性值只好为字符串吗?我们的 number function Object boolean 等呢?

getter/setter

当设置或获得对象的某部属性的值的时候,能够提供getter/setter方法。

  • getter 是一种得到属性值的点子

  • setter是一种设置属性值的秘籍。

在特色中应用get/set属性来定义对应的艺术。

var obj = {};
var initValue = 'hello';
Object.defineProperty(obj,"newKey",{
    get:function (){
        //当获取值的时候触发的函数
        return initValue;    
    },
    set:function (value){
        //当设置值的时候触发的函数,设置的新值通过参数value拿到
        initValue = value;
    }
});
//获取值
console.log( obj.newKey );  //hello

//设置值
obj.newKey = 'change value';

console.log( obj.newKey ); //change value

留神:get或set不是必须成对出现,任写其1就能够。要是不安装方法,则get和set的私下认可值为undefined

configurable和enumerable同地点的用法。


 var user = {};
 Object.defineProperty(user,"name",{
  value:"狂奔的蜗牛"
 })
 Object.defineProperty(user,"isSlow",{
  value:true
 })
 Object.defineProperty(user,"sayHi",{
  value:function () { console.log("Hi !") }
 })
 Object.defineProperty(user,"age",{
  value:12
 })
 Object.defineProperty(user,"birth",{
  value:{
   date:"2018-06-29",
   hour:"15:30"
  }
 })
 console.log(user);

兼容性

在ie捌下只幸而DOM对象上运用,尝试在原生的对象使用
Object.defineProperty()会报错。

参考:

 

图片 1

表明 事实注解任何项目标数目都以足以的啊~

主题素材又来了,如果user对象已经有了name属性,大家得以经过Object.defineProperty改换这些值吗?

大家来试试

 var user = {};
 Object.defineProperty(user,"name",{
  value:"狂奔的蜗牛"
 })
 console.log(user);
 user.name="新=>狂奔的蜗牛"
 console.log(user);

嗬??为何作者改了没意义勒??

由来:上边说了descriptor有成都百货上千品质,除了value属性还或然有个
writable【看名就能够猜到其意义属性是还是不是能够被再一次赋值】接受数据类型为
boolean(默以为false) true => 协理被重复赋值 false=>只读

哦哦,原来要是本人没安装writable值的时候就暗中认可只读啊,所以才改不掉

那大家看看,设置为true,是或不是就能够改掉了。

 var user = {};
 Object.defineProperty(user,"name",{
  value:"狂奔的蜗牛",
  writable:true
 })
 console.log(user);
 user.name="新=>狂奔的蜗牛"
 console.log(user);

图片 2

以此descriptor还会有其余的性质吗?enumerable【看名称就会想到其意义属性是不是足以被枚举】接受数据类型为
boolean(默以为false) true => 支持被枚举 false=>不支持

额。。。枚举??什….什么看头?

要是大家想清楚这么些 user对象有何样属性大家一般会如此做

var user ={
 name:"狂奔的蜗牛",
 age:25
} ;

//es6
var keys=Object.keys(user)
console.log(keys);// ['name','age']
//es5
var keys=[];
for(key in user){
 keys.push(key);
} 
console.log(keys);// ['name','age'] 

万一大家利用 Object.的方式定义属性会发生什么样啊?大家来看下输出

var user ={
 name:"狂奔的蜗牛",
 age:25
} ;
//定义一个性别 可以被枚举
Object.defineProperty(user,"gender",{
 value:"男",
 enumerable:true
})

//定义一个出生日期 不可以被枚举
Object.defineProperty(user,"birth",{
 value:"1956-05-03",
 enumerable:false
})

//es6
var keys=Object.keys(user)
console.log(keys);
// ["name", "age", "gender"]

console.log(user);
// {name: "狂奔的蜗牛", age: 25, gender: "男", birth: "1956-05-03"}
console.log(user.birth);
// 1956-05-03 

说明 很明显,大家定义为 enumerable=falsebirth品质并从未被遍历出来,遍历
=> 其实就是枚举(个人知道啊,不喜勿喷哦~)

总结 enumerable本性取值为 布尔类型 true | false默许值为
false,为真属性能够被枚举;反之则无法。此设置不影响属性的调用和
查看对象的值。

configurable是接下去我们要讲的二本个性,那本性格有几个效用:

一 属性是还是不是足以被删除
贰 属性的特色在第一次设置之后是不是被重新定义天性

var user ={
 name:"狂奔的蜗牛",
 age:25
} ;
//定义一个性别 不可以被删除和重新定义特性
Object.defineProperty(user,"gender",{
 value:"男",
 enumerable:true,
 configurable:false
})

//删除一下
delete user.gender;
console.log(user);//{name: "狂奔的蜗牛", age: 25, gender: "男"}

//重新定义特性
Object.defineProperty(user,"gender",{
 value:"男",
 enumerable:true,
 configurable:true
})
// Uncaught TypeError: Cannot redefine property: gender
//会报错,如下图

图片 3

设置为 true

var user ={
 name:"狂奔的蜗牛",
 age:25
} ;
//定义一个性别 可以被删除和重新定义特性
Object.defineProperty(user,"gender",{
 value:"男",
 enumerable:true,
 configurable:true
})

//删除前
console.log(user);
// {name: "狂奔的蜗牛", age: 25, gender: "男"}

//删除一下
delete user.gender;
console.log(user);
// {name: "狂奔的蜗牛", age: 25}

//重新定义特性
Object.defineProperty(user,"gender",{
 value:"男",
 enumerable:true,
 configurable:false
})

//删除前
console.log(user);
// {name: "狂奔的蜗牛", age: 25, gender: "男"}
//删除一下 删除失败
delete user.gender;
console.log(user);
// {name: "狂奔的蜗牛", age: 25, gender: "男"}

总结 configurable安装为 true
则该属性能够被删去和另行定义本性;反之属性是不能被删除和再度定义天性的,暗许值为false(Ps.除了可以给新定义的属性设置特性,也可以给已有的属性设置特性哈

谈到底大家的话说,最重点的多少个属性
setget(即存取器描述:定义属性如何被存取),这五个性格是做怎么样用的吗?大家经过代码来看望

var user ={
 name:"狂奔的蜗牛"
} ;
var count = 12;
//定义一个age 获取值时返回定义好的变量count
Object.defineProperty(user,"age",{
 get:function(){
  return count;
 }
})
console.log(user.age);//12

//如果我每次获取的时候返回count+1呢
var user ={
 name:"狂奔的蜗牛"
} ;
var count = 12;
//定义一个age 获取值时返回定义好的变量count
Object.defineProperty(user,"age",{
 get:function(){
  return count+1;
 }
})
console.log(user.age);//13

接下去自个儿不用解释了吗,你想在赢得该属性的时候对值做什么随你咯~

来来来,大家看看 set,不多说上代码

var user ={
 name:"狂奔的蜗牛"
} ;
var count = 12;
//定义一个age 获取值时返回定义好的变量count
Object.defineProperty(user,"age",{
 get:function(){
  return count;
 },
 set:function(newVal){
  count=newVal;
 }
})
console.log(user.age);//12
user.age=145;
console.log(user.age);//145
console.log(count);//145

//等等,如果我想设置的时候是 自动加1呢?我设置145 实际上设置是146

var user ={
 name:"狂奔的蜗牛"
} ;
var count = 12;
//定义一个age 获取值时返回定义好的变量count
Object.defineProperty(user,"age",{
 get:function(){
  return count;
 },
 set:function(newVal){
  count=newVal+1;
 }
})
console.log(user.age);//12
user.age=145;
console.log(user.age);//146
console.log(count);//146

说明
注意:当使用了getter或setter方法,不容许使用writable和value那五个属性(假诺采用,会直接报错滴)

get是获得值的时候的格局,类型为
function,获取值的时候会被调用,不安装时为 undefined

set是设置值的时候的主意,类型为
function,设置值的时候会被调用,undefined

get或set不是必须成对出现,任写其一就足以

var user ={
 name:"狂奔的蜗牛"
} ;
var count = 12;
//定义一个age 获取值时返回定义好的变量count
Object.defineProperty(user,"age",{
 get:function(){
  console.log("这个人来获取值了!!");
  return count;
 },
 set:function(newVal){
  console.log("这个人来设置值了!!");
  count=newVal+1;
 }
})
console.log(user.age);//12
user.age=145;
console.log(user.age);//146

图片 4

【完结】

Object.defineProperty艺术直接在贰个对象上定义一个新属性,也许涂改一个1度存在的性情,
并再次回到这几个目的

  • value: 设置属性的值
  • writable: 值是或不是能够重写。true | false
  • enumerable: 目的属性是或不是足以被枚举。true | false
  • configurable: 目的属性是还是不是可以被去除或是还是不是足以另行修改个性 true |
    false
  • set: 指标属性设置值的章程
  • get:指标属性获取值的艺术

下1篇,大家来探视怎么用它做1个简约的双向绑定

文章传送门 =>
用Object.defineProperty手写四个粗略的双向绑定

上述正是本文的全体内容,希望对我们的求学抱有扶助,也期待我们多多帮助脚本之家。

您可能感兴趣的篇章:

  • JavaScript的Object.defineProperty详解
  • vue源码学习之Object.defineProperty
    对数组监听
  • vue源码学习之Object.defineProperty对象属性监听
  • 浅谈vue实现数据监听的函数
    Object.defineProperty
  • vue.js利用Object.defineProperty达成双向绑定
  • 利用Object.defineProperty完结轻易的js双向绑定

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website