JavaScript的setter与getter方法
以前在写项目过程一直都没有使用过Javascript的setter与getter方法,所以对其是一种要懂不懂的概念;今天看书看到这个知识点,还是模模糊糊的,于是就打算研究研究;
Javascript对象的属性是由名字,值和一组特性构成的。那么首先,来了解一下对象的两种属性:
数据属性,我们经常使用,应该很熟悉
访问器属性,也称存取器属性
何为存取器属性?就是一组获取和设置值的函数。在ECMAScript5中,属性值可以用一个或两个方法设置,这两个方法就是getter和setter;因此getter和setter定义的属性被称为存取器属性。
var o = { get val(){ /*函数体*/ return ; }, set val(n){ /*函数体*/ } }
上面的就是一个存取器属性定义的最简单的方法,可以看出getter和setter方法其实就是取代function的一个函数。
var o = { a:3, get val(){ return Math.pow(this.a,2); } } console.log(o.val);//9 o.val = 100; console.log(o.val);//9
getter方法是无参数,并且有返回值的;当单独设置getter方法时,只能获取属性值,无法更改其定义的属性值的,保证了数据的安全性;
var o = { a:3, set val(n){ this.a = n; } } console.log(o.val);//undefined
setter方法是有参数,没有返回值的;当单独设置setter方式时,是无法读取属性值的;
var o ={ a:3, get val(){ return Math.pow(this.a,n); }, set val(n){ this.a = Math.max(this.a,n); } } console.log(o.a);//3 console.log(o.val);//9 o.val = 10; console.log(o.a);//10 console.log(o.val);//100
通过上面的代码可以看出,其中this是指其对象(即代码中的“o”);
var o ={ a:3, get val(){ return Math.pow(this.a,n); }, set val(n){ this.a = Math.max(this.a,n); } } o.val = 10; var foo = Object.create(o); console.log(foo.val);//10 foo.val = 9; console.log(foo.val);//10
另外,存取器属性也是可以被继承的;
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
js中getter和setter用法实例分析
本文实例讲述了js中getter和setter用法.分享给大家供大家参考,具体如下: 在学习Vue计算属性时,有一句"计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter". getter和setter到底是什么?于是我查找了资料: 在Es5中可以使用getter和setter部分改写默认操作,但是只能应用在单个属性上,无法应用在整个对象上.getter是一个隐藏函数,会在获取属性值时调用.setter也是一个隐藏属性,会在设置属性值时调用. 例子: var m
-
JavaScript之Getters和Setters 平台支持等详细介绍
来自John Resig早年的文章,大致翻译了一下,以作备忘. 令人高兴的是,我想我终于可以说,"现在,JavaScript的Getters和Setters使用非常广泛,它和每个JavaScript开发者的切身利益息息相关".靠,我为了说这句话已经等了很久了. 首先,我们先来快速了解什么是Getters和Setters,以及它们为什么很有用.然后,我们来看看现在都有哪些平台支持Gettets和Setters. Getters和Setters Getters和Setters使你可以快速获
-
Javascript中的getter和setter初识
前言 本文主要给大家介绍的关于Javascript中getter和setter的相关内容,第一次听说这个东西的时候是vue.js里面的数据绑定,只要绑定了数据,修改对象属性可以自动反馈到dom上,很神奇,后面也看到了文档里面实现是对对象定义了getter和setter并覆盖原属性,索性就来总结这两者的用法,下面话不多说了,来一起看看详细的介绍吧. 原理 利用Object.defineProperty来重写对象属性为getter和setter,通过getter和setter顺便改变绑定DOM节点的
-
javascript中的__defineGetter__和__defineSetter__介绍
Getter是一种获取一个属性的值的方法,Setter是一种设置一个属性的值的方法.可以为任何预定义的核心对象或用户自定义对象定义getter和setter方法,从而为现有的对象添加新的属性. 有两种方法来定义Getter或Setter方法: 1.在对象初始化时定义 2.在对象定义后通过Object的__defineGetter__.__defineSetter__方法来追加定义 在使用对象初始化过程来定义Getter和Setter方法时唯一要做的事情就是在getter方法前面加上"get&qu
-
谈谈因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
-
浅谈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的setter与getter方法
以前在写项目过程一直都没有使用过Javascript的setter与getter方法,所以对其是一种要懂不懂的概念:今天看书看到这个知识点,还是模模糊糊的,于是就打算研究研究: Javascript对象的属性是由名字,值和一组特性构成的.那么首先,来了解一下对象的两种属性: 数据属性,我们经常使用,应该很熟悉 访问器属性,也称存取器属性 何为存取器属性?就是一组获取和设置值的函数.在ECMAScript5中,属性值可以用一个或两个方法设置,这两个方法就是getter和setter:因此gette
-
关于iOS中属性变量setter与getter方法的理解
关于成员变量.实例变量.属性变量 成员变量 @implementation ViewController { UILabel *textLabel; int count; } 成员变量是用于类的内部,无需与外界接触的变量.成员变量默认是protected,因为成员变量不会生成set.get方法,所以无法和外界接触,从上面代码可以看出来,成员变量是定义在{ }中的变量,如果变量的数据类型是一个类,就如:UILabel *textLabel;那么称这个变量为实例变量.所以实例变量也是成员变量的一种特
-
Javascript监视变量变化的方法
本文实例讲述了Javascript监视变量变化的方法.分享给大家供大家参考.具体分析如下: 大家应该知道,在C#中对于属性.文件等的更改监视非常简单,因为有委托(事件).FileSystemWatcher等好东东扶持. 那么在JavaScript中,如何对变量的更改进行监视呢?首先,我仿照c#的属性来对JS进行操作,写出了如下的示例: function Class1() { var oldValue=''; var name='xu'; var id='1'; this.setName=func
-
php与javascript正则匹配中文的方法分析
本文实例讲述了php与javascript正则匹配中文的方法.分享给大家供大家参考,具体如下: php中正则匹配utf-8中文: (重点是:[\x{4e00}-\x{9fa5}]+) $str = "我们"; if (preg_match("/^[\x{4e00}-\x{9fa5}]+$/u",$str,$arr)) { print("该字符串全部是中文"); echo '<pre>'; print_r($arr); } else {
-
JavaScript中Object.prototype.toString方法的原理
在JavaScript中,想要判断某个对象值属于哪种内置类型,最靠谱的做法就是通过Object.prototype.toString方法. var arr = []; console.log(Object.prototype.toString.call(arr)) //"[object Array]" 本文要讲的就是,toString方法是如何做到这一点的,原理是什么. ECMAScript 3 在ES3中,Object.prototype.toString方法的规范如下: 15.2.
-
JavaScript脚本性能的优化方法
From:http://www.nirvanastudio.org/javascript/improve-javascript-performance.html 作者:ShiningRay @ Nirvana Studio 随着网络的发展,网速和机器速度的提高,越来越多的网站用到了丰富客户端技术.而现在Ajax则是最为流行的一种方式.JavaScript是一种解释型语言,所以能无法达到和C/Java之类的水平,限制了它能在客户端所做的事情,为了能改进他的性能,我想基于我以前给JavaScript
-
javascript三种代码注释方法
javascript语言里面的注释方法有三种. 第一种是多行注释"/**/",一般js文件开头,介绍作者,函数等信息. 复制代码 代码如下: /* *author:xxx *day:2008-08-10 */ 第二种注释方法是最常见的"//",在程序间随处可见,只能注释单行. 复制代码 代码如下: //这是一行注释,只能注释单行. //另一行注释 第三种注释不是很常见,会和html内的注释混淆,不推荐使用. 复制代码 代码如下: <!-这是一行注释,只能注释单
-
JavaScript动态插入CSS的方法
写组件时有时想把一些组件特性相关的 CSS 样式封装在 JS 里,这样更内聚,改起来方便.JS 动态插入 CSS 两个步骤:创建1.一个 style 对象 2.使用 stylesheet 的 insertRule 或 addRule 方法添加样式 一.查看样式表 先看下 document.styleSheets,随意打开一个页面 其中前三个是通过 link 标签引入的 CSS 文件,第四个是通过 style 标签内联在页面里的 CSS.有如下属性 每一个 cssRule 又有如下属性 其中的 c
-
JavaScript与HTML的结合方法详解
HTML中的JavaScript脚本必须位于<script>与</script>标签之间,JavaScript脚本可被放置在HTML页面的<body>标签和<head>标签中,这种视情况而定,一般放在<head>标签内. 一.<script> 标签 如需在HTML页面中插入JavaScript脚本,请使用<script>标签.<script>和</script>会告诉JavaScript
随机推荐
- React Native搭建iOS开发环境
- jQuery TextBox自动完成条
- Vue.js组件tree实现无限级树形菜单
- ThinkJS中如何使用MongoDB的CURD操作
- Java中四种遍历List的方法总结(推荐)
- 学习Java的Date、Calendar日期操作
- 使用C语言扩展Python程序的简单入门指引
- js 时间函数应用加、减、比较、格式转换的示例代码
- IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
- 六酷社区论坛HOME页清新格调免费版 下载
- Python图像灰度变换及图像数组操作
- Android 侧滑关闭Activity的实例
- php 转换字符串编码 iconv与mb_convert_encoding的区别说明
- javascript 代码运行器
- 在SQL Server中查询资料库的TABLE数量与名称的sql语句
- Android checkbox的listView(多选,全选,反选)具体实现方法
- 解决ssh远程登陆linux显示-bash-4.1$的问题
- Java Builder Pattern建造者模式详解及实例
- ASP.Net中表单POST到其他页面的方法分享
- PHP 事件机制(2)