js中getter和setter用法实例分析

本文实例讲述了js中getter和setter用法。分享给大家供大家参考，具体如下：

在学习Vue计算属性时，有一句“计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter”。

getter和setter到底是什么？于是我查找了资料：

在Es5中可以使用getter和setter部分改写默认操作，但是只能应用在单个属性上，无法应用在整个对象上。getter是一个隐藏函数，会在获取属性值时调用。setter也是一个隐藏属性，会在设置属性值时调用。

例子：

var myObject = {
  get a(){
    return 2
  }
  };
  Object.defineProperty(
  myObject,       //目标对象
  "b",          //属性名
  {  //描述符
    //给b设置一个getter
    get:function(){
    return this.a*2
     },
    //确保b会出现在对象的属性列表中
    enumerable:true
  }
);
console.log(myObject.a) //2
console.log(myObject.b) //4

这里使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun，测试结果如下：

不管是对象文字语法中的get a( ) { ...... }，还是defineProperty(......)中的显式定义，二者都会在对象中创建一个不包含值的属性，对于这个属性的访问会自动调用一个隐藏函数，它的返回值会被当作属性访问的返回值。（也就是说myObject.a不用加执行括号，vue中计算属性默认有getter，调用计算属性不用在后面加"( )"）

var obj = {
  //给a定义一个getter
  get a(){
  return 2;
  }
};
obj.a = 3;
console.log(obj.a); //2

使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun，测试结果如下：

由于对a只定义了getter，所以对a的set操作会忽略赋值操作，不会抛错。而且即便有合法的setter，由于我们自定义的getter只会返回2，所以set操作是没有意义的。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript常用函数技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • JavaScript的setter与getter方法

    以前在写项目过程一直都没有使用过Javascript的setter与getter方法,所以对其是一种要懂不懂的概念:今天看书看到这个知识点,还是模模糊糊的,于是就打算研究研究: Javascript对象的属性是由名字,值和一组特性构成的.那么首先,来了解一下对象的两种属性: 数据属性,我们经常使用,应该很熟悉 访问器属性,也称存取器属性 何为存取器属性?就是一组获取和设置值的函数.在ECMAScript5中,属性值可以用一个或两个方法设置,这两个方法就是getter和setter:因此gette

  • Javascript中的getter和setter初识

    前言 本文主要给大家介绍的关于Javascript中getter和setter的相关内容,第一次听说这个东西的时候是vue.js里面的数据绑定,只要绑定了数据,修改对象属性可以自动反馈到dom上,很神奇,后面也看到了文档里面实现是对对象定义了getter和setter并覆盖原属性,索性就来总结这两者的用法,下面话不多说了,来一起看看详细的介绍吧. 原理 利用Object.defineProperty来重写对象属性为getter和setter,通过getter和setter顺便改变绑定DOM节点的

  • 浅谈JS对象添加getter与setter的5种方法

    定义 getter 与 setter 1.通过对象初始化器在创建对象的时候指明(也可以称为通过字面值创建对象时声明) (function () { var o = { a : 7, get b(){return this.a +1;},//通过 get,set的 b,c方法间接性修改 a 属性 set c(x){this.a = x/2} }; console.log(o.a); console.log(o.b); o.c = 50; console.log(o.a); })(); 在 chro

  • JavaScript之Getters和Setters 平台支持等详细介绍

    来自John Resig早年的文章,大致翻译了一下,以作备忘. 令人高兴的是,我想我终于可以说,"现在,JavaScript的Getters和Setters使用非常广泛,它和每个JavaScript开发者的切身利益息息相关".靠,我为了说这句话已经等了很久了. 首先,我们先来快速了解什么是Getters和Setters,以及它们为什么很有用.然后,我们来看看现在都有哪些平台支持Gettets和Setters. Getters和Setters Getters和Setters使你可以快速获

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

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

    起因 当我打印出Vue实例下的data对象里的属性时,发现了一个有趣的事情: 它的每个属性都有两个相对应的get和set方法,我觉的这是多此一举的,于是去网上查了查Vue双向绑定的实现原理,才发现它和Angular.js双向绑定的实现原理完全不同,Angular是用的数据脏检测,当Model发生变化,会检测所有视图是否绑定了相关数据,再更改视图.而Vue使用的发布订阅模式,是点对点的绑定数据. Vue的数据绑定只有两个步骤,compile=>link. 我一直在想,vue是通过什么去监听用户对M

  • JavaScript中setter和getter方法介绍

    javascript中的setter.getter是平时接触比较少的方法,其本身也并不是标准方法,只在非ie浏览器里支持(ie内核也许有其他方法可以做到呢?暂时不知其解),但是加以利用可以做许多事情,比如: 1.对数据的访问限制: a.value是对value变量的getter方法调用,如果在getter方法实现中抛出异常,可以阻止对value变量的访问 2.对dom变量进行监听: window.name是一个跨域非常好用的dom属性(大名鼎鼎,详见百度),如果覆盖window.name的set

  • javascript中的__defineGetter__和__defineSetter__介绍

    Getter是一种获取一个属性的值的方法,Setter是一种设置一个属性的值的方法.可以为任何预定义的核心对象或用户自定义对象定义getter和setter方法,从而为现有的对象添加新的属性. 有两种方法来定义Getter或Setter方法: 1.在对象初始化时定义 2.在对象定义后通过Object的__defineGetter__.__defineSetter__方法来追加定义 在使用对象初始化过程来定义Getter和Setter方法时唯一要做的事情就是在getter方法前面加上"get&qu

  • js中getter和setter用法实例分析

    js中getter和setter用法实例分析

    本文实例讲述了js中getter和setter用法.分享给大家供大家参考,具体如下: 在学习Vue计算属性时,有一句"计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter". getter和setter到底是什么?于是我查找了资料: 在Es5中可以使用getter和setter部分改写默认操作,但是只能应用在单个属性上,无法应用在整个对象上.getter是一个隐藏函数,会在获取属性值时调用.setter也是一个隐藏属性,会在设置属性值时调用. 例子: var m

  • JS中sort函数排序用法实例分析

    本文实例讲述了JS中sort函数排序用法.分享给大家供大家参考,具体如下: 最近遇到了一个面试题目,关于排序的问题,为了完善自己的知识点,这里就写一下学习笔记 <html> <head> <TITLE>class_obj_js_class</TITLE> <script language=javaScript> //sort()方法默认是按照ASCII码大小排序,看下面两个例子 function sortDemo(){ var a, l; //

  • js中setTimeout()与clearTimeout()用法实例浅析

    本文实例分析了js中setTimeout()与clearTimeout()用法.分享给大家供大家参考.具体分析如下: setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout. <input type = text id = aaa > <input type = button value = stop id = bb onclick = bb()> <scrip

  • js中addEventListener()与removeEventListener()用法案例分析

    本文实例讲述了js中addEventListener()与removeEventListener()用法.分享给大家供大家参考,具体如下: 所有的DOM节点中都包含addEventListener()与removeEventListener()这两种方法,用于追加事件和删除追加. 接受参数:要处理的事件名.作为事件处理程序的函数和一个布尔值. (3个) 最后这个布尔值参数是true,表示在捕获阶段调用事件处理程序:如果是false,表示在冒泡阶段调用事件处理程序.默认为false; 事件传递有两

  • javascript与jquery中的this关键字用法实例分析

    本文实例分析了javascript与jquery中的this关键字用法.分享给大家供大家参考,具体如下: this 表示当前的对象,这个当前对象可以是表单,<p>等任何元素 1.javascript中this的用法: JS部分: <script type="text/javascript"> function chimg(obj){ obj.src="./images/2.jpg"; } </script> HTML部分: 复制代

  • JS严格模式原理与用法实例分析

    本文实例讲述了JS严格模式原理与用法.分享给大家供大家参考,具体如下: 使用 "use strict" 指令 "use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增. 它不是一条语句,但是是一个字面量表达式,在 JavaScript 旧版本中会被忽略. 支持严格模式的浏览器: Internet Explorer 10 +. Firefox  4+ Chrome  13+. Safari 5.1+. Opera 12+.

  • JQuery中基础过滤选择器用法实例分析

    本文实例讲述了JQuery中基础过滤选择器用法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

  • php中strlen和mb_strlen用法实例分析

    本文实例分析了php中strlen和mb_strlen用法.分享给大家供大家参考,具体如下: 首先看如下代码(文件编码utf8): <?php $utf8_string = "abcd我你他她它"; var_dump(strlen($utf8_string)); var_dump(mb_strlen($utf8_string, 'gb2312')); var_dump(mb_strlen($utf8_string, 'utf8')); var_dump(mb_strlen($ut

  • python中引用与复制用法实例分析

    本文实例讲述了python中引用与复制用法.分享给大家供大家参考.具体分析如下: 在python中,任何不可变对象是传值的,而可变对象是传引用的. 不管是向函数传递参数或者是任何形式的对象复制来说,不可变对象(比如整数,字符串)被真正复制,而可变对象只是复制了一个对他们的引用,即在内存中只有一份对象,而引用两份.   a=b 这样的赋值,就会创建对b的引用,对于象数字和字符串这样的不可变的对象,这种赋值实际是创建了b的一个副本 >>> a='hello' >>> b=a

  • python中sys.argv参数用法实例分析

    本文实例讲述了python中sys.argv参数用法.分享给大家供大家参考.具体分析如下: 在学python的过程中,一直弄不明白sys.argv[]的意思,虽知道是表示命令行参数,但还是有些稀里糊涂的感觉. 今天又好好学习了一把,总算是大彻大悟了. Sys.argv[]是用来获取命令行参数的,sys.argv[0]表示代码本身文件路径,所以参数从1开始,以下两个例子说明: 1.使用sys.argv[]的一简单实例 import sys,os os.system(sys.argv[1]) 这个例

随机推荐