JavaScript中的方法和属性
书读百遍其义自见
学习《JavaScript设计模式》一书时,前两个章节中的讲解的JavaScript基础知识,让我对属性和方法有了清晰的认识。如下是我的心得体会以及部分摘录的代码。
不同于大多数面向对象语言一样,JavaScript作为一种解释性的弱类型语言,通过自身的一些特性实现类的封装,从而实现面向对象的。面向对象编程的思想就是一些属性方法的隐藏和暴露,比如私有属性、私有方法、共有属性、共有方法等。既然JavaScript实现了面向对象,同样具有这些属性和方法。
JavaScript中包含:
- 私有属性(私有方法)
- 特权方法
- 公有属性(公有方法)
- 类静态共有公有属性(类静态公有方法) 注:对象不能访问
- 共有属性(共有方法)
- 静态私有属性(静态私有方法) 注:通过闭包可以实现
如下是代码实例:
<!DOCTYPE html>
<html>
<head>
<title>属性与方法</title>
<meta charset="utf-8">
<script type="text/javascript">
var Book=function(id,name,price){
// 私有属性
var num=1;
var name,price;
// 私有方法
function checkId(){ }; // 特权方法
this.getName=function(){};
this.setName=function(){};
this.getPrice=function(){};
this.setPrice=function(){};
// 对象公有属性
this.id=id;
this.chapters=["章节1","章节2"];
// 对象公有方法
this.copy=function(){
console.log('公有方法,对象实例可访问');
};
//构造器
this.setName(name);
this.setPrice(price);
}
// 类静态公有属性(对象不能访问)
Book.isChinese=true;
// 类静态公有方法(对象不能访问)
Book.resetTime=function(){
console.log('new time');
} Book.prototype={
// 共有属性
isJSBook:false,
// 共有方法
display:function(){}
} var b1=new Book(1,'爱的教育',20);
console.log(b1.num); //undefined 对象实例无法访问私有属性
console.log(b1.id); //1 对象实例可访问公有属性
console.log(b1.isJSBook); //false 对象实例可访问共有属性
console.log(b1.isChinese); //undefined 对象实例无法访问类静态公有属性
console.log(Book.isChinese); //true 类直接访问类静态公有属性
console.log(b1.chapters); //["章节1","章节2"] 对象实例可访问公有属性 //以下验证公有属性各个对象实例之间互不影响
var b2=new Book(2,'茶花女',30);
console.log(b2.id); //
console.log(b2.chapters); //["章节1","章节2"]
b2.chapters.push("章节3");
console.log(b2.chapters); //["章节1","章节2","章节3"]
console.log(b1.chapters); //["章节1","章节2"]
</script>
</head>
<body>
</body>
</html>
通过闭包实现类的静态私有变量和静态私有方法:
<!DOCTYPE html>
<html>
<head>
<title>属性与方法</title>
<meta charset="utf-8">
<script type="text/javascript">
var Book=(function(){
// 静态私有属性
var isChinese=true;
// 静态私有方法
var resetTime=function(){
console.log('new time');
} function _book(id,name,price){
// 私有属性
var num=1;
var name,price;
// 私有方法
function checkId(){
}; // 特权方法
this.getName=function(){};
this.setName=function(){};
this.getPrice=function(){};
this.setPrice=function(){};
// 对象公有属性
this.id=id;
this.chapters=["章节1","章节2"];
// 对象公有方法
this.copy=function(){
console.log('公有方法,对象实例可访问');
};
//构造器
this.setName(name);
this.setPrice(price);
} //构建原型
_book.prototype={
isJSBook:false,
// 共有方法
display:function(){}
} //返回类
return _book;
})(); var b1=new Book(1,'爱的教育',20);
console.log(b1.num); //undefined 对象实例无法访问私有属性
console.log(b1.id); //1 对象实例可访问公有属性
console.log(b1.isJSBook); //false 对象实例可访问共有属性
console.log(b1.isChinese); //undefined 对象实例无法访问类静态私有属性
console.log(b1.chapters); //["章节1","章节2"] 对象实例可访问公有属性 //以下验证公有属性各个对象实例之间互不影响
var b2=new Book(2,'茶花女',30);
console.log(b2.id); //
console.log(b2.chapters); //["章节1","章节2"]
b2.chapters.push("章节3");
console.log(b2.chapters); //["章节1","章节2","章节3"]
console.log(b1.chapters); //["章节1","章节2"]
</script>
</head>
<body>
</body>
</html>
JavaScript中的方法和属性的更多相关文章
- 全面理解Javascript中Function对象的属性和方法
http://www.cnblogs.com/liontone/p/3970420.html 函数是 JavaScript 中的基本数据类型,在函数这个对象上定义了一些属性和方法,下面我们逐一来介绍这 ...
- JavaScript中的可枚举属性与不可枚举属性
在JavaScript中,对象的属性分为可枚举和不可枚举之分,它们是由属性的enumerable值决定的.可枚举性决定了这个属性能否被for…in查找遍历到. 一.怎么判断属性是否可枚举 js中基本包 ...
- JavaScript中reduce()方法
原文 http://aotu.io/notes/2016/04/15/2016-04-14-js-reduce/ JavaScript中reduce()方法不完全指南 reduce() 方法接收 ...
- JavaScript中的方法、方法引用和参数
首先,我们来看一段代码,如果觉得不甚明白的,则本文会对你有益: var player = function (e) { return (function f(m) { ...
- 详解 JavaScript 中 splice() 方法
splice() 方法是一个比较少用的方法,但是功能确实很好,并且在我们 coding 的时候,经常有需要 splice() 方法,先介绍一下该方法. 在 JavaScript 中 splice() ...
- JavaScript中的方法
JavaScript中的方法 在JavaScript中,可以通过对象来调用对应的方法.在JavaScript中,有三个重要的window对象方法:用于显示警告信息的alert.用于显示确认信息的con ...
- JavaScript中Array方法总览
title: JavaScript中Array方法总览 toc: true date: 2018-10-13 12:48:14 push(x) 将x添加到数组最后,可添加多个值,返回数组长度.改变原数 ...
- javascript中对象访问自身属性的方式
在javascript中,通过对象的方法访问对象自身属性时,必须采用this.fieldName的方式. 原因是javascript中Function是无状态的,访问对象的属性时,必须指定当前的上下文 ...
- JavaScript中trim 方法实现
Java中的 String 类有个trim() 能够删除字符串前后的空格字符.jQuery中也有trim()方法能够删除字符变量前后的字符串. 可是JavaScript中却没有对应的trim() 方法 ...
随机推荐
- 五、Ubuntu 16.04 安装PyCharm
方法一,在终端用指令通过第三方源安装pycharm. 本文通过第三方源安装PyCharm,好处是升级方便. 添加源: $ sudo add-apt-repository ppa:mystic-m ...
- php内置函数分析之trim()
官方手册中: 类似函数还有两个:ltrim() 和 rtrim().分别处理字符串的左侧.右侧. trim()的具体实现位于:ext/standard/string.c /* {{{ proto st ...
- Python---编辑器安装和print函数
Python---编辑器安装和print函数 -------------------------------------------------------- 一.Python是什么? Python是 ...
- Windows环境下使用Mycat模拟分库分表-读写分离案例
一.基本环境 W7 64位.Mycat1.6.MySQL8.0 二.Mycat核心配置文件配置 解压Mycat1.6,并对server.xml.schema.xml.rule.xml三个核心配置文件做 ...
- 攻防世界 | guess_num
查源码发现v5可以覆盖sreed[0],这样这个随机数列就可控了 在随机种子这里我一开始使用devC++来生成,居然结果跟gcc的不一样
- 服务器在没有request请求时是什么状态
服务器,例如web服务器,在没有接受到request请求时,它是一种什么状态? 是监听状态,就像电灯泡在没通电的时候,没法光,灯泡不会不停的问电线有电吗?有电吗?而是电来了,状态就发生了改变! 服务器 ...
- inline-block的间隙问题 box-orient属性 line-clamp属性 margin问题
只要设了 display:inline-block 将元素变成行级块元素的时候,会自带空隙,即使你设了 margin 和 padding 依然没有效果! 解决办法:只要在父元素上加上font-size ...
- 凉经-乐糖游戏-PHP开发实习生
收到面试通知当天因为学校出事要求我明天必须回去,所以就买当晚的火车票,然后跟公司说学校有事明天没法去面试了,公司人事比较好给我安排到当天下午面试.公司规模不是很大,但位置好下了地铁到,可能因为招的是实 ...
- 测开之路七十:监控平台之html
监控平台的html <!-- 继承base模板 -->{% extends "base.html" %} <!-- 引入bootstrap-datetimepic ...
- ag-grid 表格中添加图片
ag-grid是一种非常好用的表格,网上搜索会有各种各样的基本用法,不过对于在ag-grid 表格中添加图片我没有找到方法,看了官方的文档,当然英文的自己也是靠网页翻译,最后发现有这么一个例子,我知道 ...