谈谈因Vue.js引发关于getter和setter的思考


Posted in Javascript onDecember 02, 2016

起因

当我打印出Vue实例下的data对象里的属性时,发现了一个有趣的事情:

谈谈因Vue.js引发关于getter和setter的思考

它的每个属性都有两个相对应的getset方法,我觉的这是多此一举的,于是去网上查了查Vue双向绑定的实现原理,才发现它和Angular.js双向绑定的实现原理完全不同,Angular是用的数据脏检测,当Model发生变化,会检测所有视图是否绑定了相关数据,再更改视图。而Vue使用的发布订阅模式,是点对点的绑定数据。

Vue的数据绑定只有两个步骤,compile=>link

我一直在想,vue是通过什么去监听用户对Model的修改,直到我发现Vue的data里,每个属性都有setget属性,我才明白过来。

在平时,我们创建一个对象,并修改它的属性,是这样的:

var obj = {
  val:99
 }
 obj.val = 100;
 console.log(obj.val)//100

没有任何问题,但是如果要你去监测,当我修改了这个对象的属性时,要去做一些事,你会怎么做?

相关思考

这就要用到gettersetter了。

假设我现在要给一个码农对象添加一个name属性,而且每次更新name属性时,我要去完成一些事,我们可以这样做:

var Coder = function() {
  var that = this;
  return {
   get name(){
    if(that.name){
     return that.name
    }
    return '你还没有取名'
   },
   set name(val){
    console.log('你把名字修成了'+val)
    that.name = val
   }
  }
 }
 var isMe = new Coder()
 console.log(isMe.name)
 isMe.name = '周神'
 console.log(isMe.name)
 console.log(isMe)

输出:

谈谈因Vue.js引发关于getter和setter的思考

你会发现这个对象和最上面的Vue中的data对象,打印出来的效果是一样的,都拥有getset属性。

我们来一步步分析下上面的代码,很有趣。

我们先创建一个对象字面量:

var Coder = function() {...}

再把this缓存一下:

var that = this;

接下来是最重要的,我们return了一个对象回去:

{

get name(){...},


set name(val){...}

}

顾名思义,get为取值,set为赋值,正常情况下,我们取值和赋值是用obj.prop的方式,但是这样做有一个问题,我如何知道对象的值改变了?所以就轮到set登场了。

你可以把getset理解为function,当然,只是可以这么理解,这是完全不一样的两个东西。

接下来创建一个码农的实例,isMe;此时,isMe是没有name属性的,当我们调用isMe.name时,我们会进入到get name(){...}中,先判断isMe是否有name属性,答案是否定的,那麽就添加一个name属性,并给它赋值:"你还没有取名";如果有name属性,那就返回name属性。

看到这里你一定知道get怎么使用了,对,你可以把get看成一个取值的函数,函数的返回值就是它拿到的值。

我感觉比较重要的是set属性,当我给实例赋值:

isMe.name="周神"

此时,会进入set name(val){...};形参val就是我赋给name属性的值,在这个函数里,我就可以做很多事了,比如双向绑定!因为这个值的每次改变都必须经过set,其他方式是改变不了它的,相当于一个万能的监听器。

还有另一种方法可以实现这个功能。

ES5的对象原型有两个新的属性__defineGetter____defineSetter__ ,专门用来给对象绑定get和set。

可以这样书写:

var Coder = function() {
 }
 Coder.prototype.__defineGetter__('name', function() {
  if (this.name) {
   return this.name
  }else{
   return '你还没有取名'
  }
 })
 Coder.prototype.__defineSetter__('name', function(val) {
  this.name = val
 })
 var isMe = new Coder()
 console.log(isMe.name)
 isMe.name = '周神'
 console.log(isMe.name)
 console.log(isMe)

效果是一样的,建议使用下面这种方式,因为是在原型上书写,所以可以继承和重用。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
麦鸡的TAB切换功能结合了javascript和css
Dec 17 Javascript
使用jQuery实现的掷色子游戏动画效果
Mar 14 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 Javascript
jQuery表单插件ajaxForm实例详解
Jan 17 Javascript
Javascript继承机制详解
May 30 Javascript
react native与webview通信的示例代码
Sep 25 Javascript
JS实现图片旋转动画效果封装与使用示例
Jul 09 Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 Javascript
JS实现躲避粒子小游戏
Jun 18 Javascript
jquery插件懒加载的示例
Oct 24 jQuery
jquery获取input type=text中的值的各种方式(总结)
Dec 02 #Javascript
vue.js入门(3)——详解组件通信
Dec 02 #Javascript
javascript实现鼠标点击页面 移动DIV
Dec 02 #Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 #Javascript
bootstrap使用validate实现简单校验功能
Dec 02 #Javascript
在网页中插入百度地图的步骤详解
Dec 02 #Javascript
PHP获取当前页面完整URL的方法
Dec 02 #Javascript
You might like
PHP通过header实现文本文件下载的代码
2010/08/08 PHP
强制PHP命令行脚本单进程运行的方法
2014/04/15 PHP
php+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
事件绑定之小测试  onclick && addEventListener
2011/07/31 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
详解jquery uploadify 上传文件
2013/11/09 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
JQuery实现鼠标移动图片显示描述层的方法
2015/06/25 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
nodejs入门教程三:调用内部和外部方法示例
2017/04/24 NodeJs
浅谈JavaScript闭包
2019/04/09 Javascript
Python调用C# Com dll组件实战教程
2017/10/12 Python
python实现微信自动回复功能
2018/04/11 Python
Python使用Beautiful Soup爬取豆瓣音乐排行榜过程解析
2019/08/15 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
Perfumetrader荷兰:香水、化妆品和护肤品在线商店
2017/09/15 全球购物
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
应用服务器有那些
2012/01/19 面试题
五年后的职业生涯规划
2014/03/04 职场文书
实习单位评语
2014/04/26 职场文书
单位工作证明格式模板
2014/10/04 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
2015年采购部工作总结
2015/04/23 职场文书
2015年“7.11”世界人口日宣传活动方案
2015/05/06 职场文书
公司与个人合作协议书
2016/03/19 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA