原生js简单实现双向数据绑定原理

时间:2021-09-20 02:46:43

根据对象的访问器属性去监听对象属性的变化,访问器属性不能直接在对象中设置,而必须通过 defineProperty() 方法单独定义。 访问器属性的"值"比较特殊,读取或设置访问器属性的值,实际上是调用其内部特性:get和set函数。

下面通过一个实例解释下双向数据的过程:

原生js简单实现双向数据绑定原理

通过创建一个obj对象,然后设置一个访问器属性hello,然后监听文本框的一个keyup事件,调用回调函数,重新设置obj.hello属性,其实际上是去调用内部属性set方法,在set方法更改文本框的value和p标签的innerHTML,从而达到数据的绑定。get 和 set 方法内部的 this 都指向 obj,这意味着 get 和 set 函数可以操作对象内部的值。另外,访问器属性的会"覆盖"同名的普通属性,因为访问器属性会被优先访问,与其同名的普通属性则会被忽略。