24 JavaScript对象访问器&JavaScript对象构造器
ES5引入了Getter和Setter
Getter和Setter允许定义对象访问器
JavaScript Getter(get关键字):获取对象属性
<script>
var person = {
name: "lisi",
age: 12,
language: "chi",
get lang() {
return this.language;
}
};
document.getElementById("demo").innerHTML = person.lang;
</script>
JavaScript对象函数方式:
<script>
var car1 = {
name: "bmw",
size: "middle",
price: 10000000,
getName: function(){
return this.name;
},
setName: function(newName){
this.name = newName;
}
}; document.getElementById("demo").innerHTML =
car1.getName();
car1.setName("audi");
document.getElementById("demo").innerHTML =
car1.getName();
</script>
JavaScript Setter(set关键字):设置对象属性
<script>
var car = {
name: "bmw",
size: "middle",
price: 10000000,
set newName(newname){
this.name = newname;
}
};
car.newName = "benz";
document.getElementById("demo").innerHTML = car.name;
</script>
JavaScript对象中,get和set关键字设置的函数调用是以访问属性的形式访问,obj.func = str;
JavaScript对象中,一般函数的访问形式是obj.func(str);
相较之下,get和set方式提供了更简洁的语法。
JavaScript Getter和Setter实现计数器:
<script>
var counter = {
count: 0,
get reset() {
this.count = 0;
},
get increment() {
this.count++;
},
get decrement() {
this.count--;
},
set add(number) {
this.count += number;
},
set subtract(number) {
this.count -= number;
}
};
counter.increment;
counter.add = 100;
counter.decrement;
counter.subtract = 50;
document.getElementById("demo").innerHTML = counter.count;
</script>
Object.defineProperty:为对象添加新属性或者修改已经存在的属性
Object.property(obj,prop,desc)
- obj:需要定义属性的当前对象
- prop:当前需要定义的属性名字(字符串类型)
- desc:对定义属性的描述
Object.defineProperty()实现计数器:
<script>
var counter1 = {
count: 0
};
Object.defineProperty(counter1, "reset", {
get: function () {
this.count = 0;
}
});
Object.defineProperty(counter1, "increment", {
get: function () {
this.count++;
}
});
Object.defineProperty(counter1, "decrement", {
get: function () {
this.count--;
}
});
Object.defineProperty(counter1, "add", {
set: function (number) {
this.count += number;
}
});
Object.defineProperty(counter1, "subtract", {
set: function (number) {
this.count -= number;
}
}); counter1.increment;
counter1.add = 50;
counter1.subtract = 20;
document.getElementById("demo").innerHTML = counter1.count;
</script>
JavaScript对象构造器:
对象构造器不同于单一对象,对象构造器旨在创建对象类型,或者说对象的蓝图。
以下示例中,Person()就是对象构造器函数。
单一对象:
var Person = {
firstName = "",
lastName = "",
age = "",
eyeColor = ""
}
对象构造器:
<script>
//对象构造器
function Person(f,l,age,eyeColor){
this.firstName = f;
this.lastName = l;
this.age = age;
this.eyeColor = eyeColor;
//为构造器添加属性和方法,必须在构造器函数里面添加,不能在外面添加(除非使用原型链prototype)
this.changeName = function(name){
this.lastName = name;
};
}
var zhangsan = new Person("zhangsan","lisi",13,"blue");
var liuliu = new Person("liuliu","qiqi",13,"blue");
document.getElementById("demo").innerHTML = zhangsan.lastName + " " + zhangsan.age; //为第一个对象添加国籍
zhangsan.nationnality = "China";
document.getElementById("demo").innerHTML = zhangsan.nationnality; //为第一个新对象添加方法
zhangsan.fulName = function(){
return zhangsan.firstName + " " + zhangsan.lastName;
};
zhangsan.changeName("alibaba");
document.getElementById("demo").innerHTML = zhangsan.fulName();
</script>
- this指代当前对象,在对象构造器中,this是没有值的,当你创建了一个新对象,他就指代这个新对象。
- this是关键词,不是变量,this的值无法被改变。
- 可以直接在构造器外面为新建对象添加属性和方法
- 只可以在构造器里面为构造器添加属性和方法
24 JavaScript对象访问器&JavaScript对象构造器的更多相关文章
- JavaScript对象访问器属性
对象访问器就是setter和getter,他们的作用就是 提供另外一种方法来获取或者设置对象的属性值, 并且在获取和设置的时候,可以用一定的其他操作. 看下面代码: <script> va ...
- 网页计时访问器application对象
网页计时访问器 application对象代表Web应用本身,整个Web共享一个application对象.开始于服务器打开结束与服务器关闭.在不同的浏览器打开j计时器仍然有作用.除非把服务器关闭 & ...
- 用TypeScript开发Vue——如何通过vue实例化对象访问实际ViewModel对象
用TypeScript开发Vue--如何通过vue实例化对象访问实际ViewModel对象 背景 我个人很喜欢TypeScript也很喜欢Vue,但在两者共同使用的时候遇到一个问题. Vue的实例化对 ...
- JavaScript的访问器
一.访问器属性: 1.Configurable:表示能否通过delete删除属性,从而重新定义属性,能否修改属性的特性,或者能否把属性修改为数据属性.对于直接在对象上定义的属性,这个特性的默认值为tr ...
- JavaScript之面向对象的概念,对象属性和对象属性的特性简介
一.大家都知道,面向对象语言有一个标志,那就是他们都有类的概念,通过类我们可以创建任意多个具有相同属性和方法的对象.但ECMAScript(指定JavaScript标准的机构,也就是说JavaScri ...
- C#基础(204)--对象初始化器,基本数据类型与引用数据类型特点总结,ref,out关键字的使用
对象初始化器: 对象在创建过程中也可以使用对象初始化器完成“属性的初始化” Student stu =new Student(){ StudentId=, StudentName="张三&q ...
- C#属性访问器
属性的访问器包含与获取或设置属性有关的可执行语句.访问器声明可以包含 get 访问器或 set 访问器,或者两者均包含.声明采用下列形式之一:get {}set {} get 访问器get 访问器体与 ...
- javascript对象属性——数据属性和访问器属性
ECMA-262第五版在定义时,描述了属性property的各种特征,定义这些特性是为了实现javascript引擎用的,为了表示该特性是内部值,规范把它们放在了两对儿方括号中,例如[[Enumera ...
- JavaScript对象的两类属性(数据属性与访问器属性)
对JavaScript来说,属性并非只是简单的名称和值,JavaScript用一组特征(attribute)来描述属性 (property). 第一类属性数据属性具有四个特征. value:就是属性的 ...
随机推荐
- Windows下PHP安装 Imagick 扩展
1.下载拓展下载地址一: http://windows.php.net/downloads/pecl/releases/imagick/下载地址二: https://pecl.php.net/pack ...
- 测试理论 - Test Double
概述 简述 test double mock, fake 之类的东西 背景 最近在看 google 软件测试之道 妈的 13 年的老书了 书里有提到 mock, fake, stub 刚好, 我又不太 ...
- spring 配置
在context中配置 如:在base-package指明一个包: <context:component-scan base-package="cn.edu.dao"/> ...
- Ubuntu16.04安装TORCS
下载torch安装包: git clone https://github.com/torch/distro.git torch --recursive 安装依赖库: cd torch/ sudo ba ...
- redis常用配置参数
首先弄清楚当前redis读取的是哪个配置文件,然后去配置文件修改,例如windows 打开服务列表,点击Redis,右键属性 "D:\Program Files\Redis\redis-se ...
- 设置datagridview 单个单元格的背景色
方法一: private void dataGridView1_RowPrePaint(object sender, DataGridViewRowPrePaintEventArgs e){DataG ...
- 教你如何用python和pygame制作一个简单的贪食蛇游戏,可自定义
1.效果图 2.完整的代码 #第1步:导出模块 import pygame, sys, random from pygame.locals import * # 第2步:定义颜色变量,在pygame中 ...
- Codeforces 1315A Dead Pixel (水题)
Screen resolution of Polycarp's monitor is a×ba×b pixels. Unfortunately, there is one dead pixel at ...
- Atcoder Beginner Contest151D(迷宫问题求任意两点最短路径的最大值,BFS)
BFS可以求得最短路,DFS会找到从当前点到图中叶子结点的路径. #define HAVE_STRUCT_TIMESPEC #include<bits/stdc++.h> using na ...
- Codeforces Round #610 (Div. 2)E(模拟,DFS)
先找到一条多边形的边,然后循环一圈输出多边形上的点.把每个三角形看作一个结点,以两个三角形之间公用边为边建立一张图,DFS输出叶子结点,则得到先切后切的顺序. #define HAVE_STRUCT_ ...