js基础知识(公有方法、私有方法、特权方法)


Posted in Javascript onNovember 06, 2015

本文涉及的主题虽然很基础,在许多人看来属于小伎俩,但在JavaScript基础知识中属于一个综合性的话题。这里会涉及到对象属性的封装、原型、构造函数、闭包以及立即执行表达式等知识。

公有方法
公有方法就是能被外部访问并调用的方法。

// 在对象中
var Restaurant = {
 name: 'McDonald',
 // 公有方法
 getName: function() {
 return this.name;
 }
}

// 在构造函数中
function Person(name, age) {
 this.name = name;
 this.age = age;
 // 公有方法
 this.getName = function() {
 return this.name;
 }
}

// 在原型中
Person.prototype.getAge = function() {
 return this.age;
}

私有方法特权方法
这两个方法一般放在一起讨论,原因在于我们定义的特权方法是指有权访问内部私有属性和私有方法的公有方法,而私有方法是指外部不可见且不可访问的方法。

通常定义一个对象的方式有二种,一是使用Object实例化或者对象表达式,二是使用构造函数。同样在不同的方式下面定义私有方法和特权方法的形式也不相同。

在对象中
这里我们通过Object对象表达式来创建一个对象并添加一些属性和方法,然后直接采用静态的方式调用。对象的私有数据放置在一个匿名函数立即执行表达式(IIFE)中。这意味着这个函数只存在于被调用的瞬间,一旦执行后就立即被销毁了。

在对象中创建私有数据的方式在对象的模式(指创建对象的模式)中被称之为模块模式,它的基本格式如下:

var yourObject = (function() {

 // 私有属性和方法

 return {
 // 公有方法和属性
 }
}) ();

在模块模式中,返回的对象字面量中只包含可以公开的属性和方法。

var Restaurant = (function() {
 // 私有属性
 var _total = 10;

 // 私有方法
 var _buyFood = function() {
 _total--;
 };
 var _getTotal = function() {
 return _total;
 }

 return {
 name: 'McDonald',
 getTotal: _getTotal,
 buy: _buyFood
 }
}) ();

Restaurant.buy();
console.log(Restaurant.name); // 'McDonald'
console.log(Restaurant.getTotal()); // 9

注意我们使用了闭包的方式来间接使用内部私有变量,同时对餐厅(Restaurant)名(name)进行了初始化。

在构造函数中
在上面介绍的模块模式创建私有方法时,公有方法和特权方法并没有什么本质上的区别,原因在于这个概念是来自于使用构造函数创建私有数据的时候定义出来的。

在构造函数中定义私有属性和方法很方便,我们不需要使用闭包,可以在调用的时候初始化数据。

function Restaurant(name) {
 // 私有属性
 var _total = 10;

 // 公有属性
 this.name = name;

 // 私有方法
 function _buyFood() {
 _total--;
 }

 // 特权方法
 this.buy = function() {
 _buyFood();
 }

 this.getTotal = function() {
 return _total;
 }
}

// 公有方法, 注意这里不能访问私有成员_total
Restaurant.prototype.getName = function() {
 console.log(_total); // Uncaught ReferenceError: _total is not defined
 return this.name;
}

var McDonald = new Restaurant('McDonald');
console.log(McDonald.getName()); // 'McDonald'
McDonald.buy();
console.log(McDonald.getTotal()); // 9

合二为一,更加灵活的方式
使用模块模式我们可以多次调用,每次执行完后都会被销毁掉。使用构造函数方式可以传入一些初始化的数据,但在公有方法中无法访问到私有成员属性,如果有很多公有方法需要访问私有数据,我们全部用特权方法来写,最后会给每个实例带去很多没有必要的方法。因此,将两者结合在一起可以长短互补,结合方式也很简单

var Restaurant = (function() {
 // 私有属性
 var _total = 10;

 // 私有方法
 function _buyFood() {
 _total--;
 }

 // 构造函数
 function restaurant(name) {
 this.name = name;
 this.getTotal = function() {
 return _total;
 }
 }

 restaurant.prototype.buy = function() {
 console.log(_total); // 10
 _buyFood();
 }

 restaurant.prototype.getName = function() {
 return this.name;
 }

 return restaurant;
}) ();

var McDonald = new Restaurant('McDonald');
console.log(McDonald.getName()); // 'McDonald'
McDonald.buy();
console.log(McDonald.getTotal()); // 9

以上就是本文的全部内容,小编只是总结了其中一小部分,还有许多未提及到的知识点,大家可以自己摸索研究,希望本文可以对初学者有所帮助。

Javascript 相关文章推荐
用javascript自动显示最后更新时间
Mar 15 Javascript
JavaScript 事件属性绑定带参数的函数
Mar 13 Javascript
Javascript在IE和FireFox中的不同表现简析
Dec 03 Javascript
引用外部js乱码问题分析及解决方案
Apr 12 Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 Javascript
深入理解Java线程编程中的阻塞队列容器
Dec 07 Javascript
javascript实现获取图片大小及图片等比缩放的方法
Nov 24 Javascript
Javascript中八种遍历方法的执行速度深度对比
Apr 25 Javascript
vue-music关于Player播放器组件详解
Nov 28 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 Javascript
JS不要再到处使用绝对等于运算符了
Apr 30 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
Nov 06 #Javascript
javascript中的altKey 和 Event属性大全
Nov 06 #Javascript
JS日期加减,日期运算代码
Nov 05 #Javascript
程序员必知35个jQuery 代码片段
Nov 05 #Javascript
js如何实现淡入淡出效果
Nov 18 #Javascript
JavaScript数组去重的五种方法
Nov 05 #Javascript
javascript实现tab切换的两个实例
Nov 05 #Javascript
You might like
全国FM电台频率大全 - 18 湖南省
2020/03/11 无线电
php中修改浏览器的User-Agent来伪装你的浏览器和操作系统
2011/07/29 PHP
解析PHP汉字转换拼音的类
2013/06/18 PHP
PHP获取音频文件的相关信息
2015/06/22 PHP
thinkPHP3.x常量整理(预定义常量/路径常量/系统常量)
2016/05/20 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
PHP7生产环境队列Beanstalkd用法详解
2020/05/19 PHP
php命令行模式代码实例详解
2021/02/26 PHP
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
异步javascript的原理和实现技巧介绍
2012/11/08 Javascript
jquery制作图片时钟特效
2020/03/30 Javascript
Javascript数组Array方法解读
2016/03/13 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
jQuery zTree树插件的使用教程
2019/08/16 jQuery
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
python的unittest测试类代码实例
2017/12/07 Python
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
详解Python3定时器任务代码
2019/09/23 Python
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
廉价航班、机票和酒店:JustFly
2018/02/07 全球购物
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
瑞典最大的儿童用品网上商店:pinkorblue.se
2021/03/09 全球购物
个人求职简历中英文自我评价
2013/12/16 职场文书
实习单位接收函
2014/01/11 职场文书
积极向上的团队口号
2014/06/06 职场文书
低碳生活的宣传标语
2014/06/23 职场文书
酒后驾车标语
2014/06/30 职场文书
成本会计岗位职责
2015/02/03 职场文书
酒店辞职书怎么写
2015/02/26 职场文书
vue+springboot实现登录验证码
2021/05/27 Vue.js
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android
css如何把元素固定在容器底部的四种方式
2022/06/16 HTML / CSS