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

本文涉及的主题虽然很基础,在许多人看来属于小伎俩,但在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

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

(0)

相关推荐

  • javascript真的不难-回顾一下基础知识

    前言 说Jquery之前,先来学习一下Javascript(以后简称为JS)语言中的基础知识问题,其时对于每种编程语言来说基础知识都是大同小异的,对变量,函数,条件语句块,循环语句块等等,而对于每种语言在写法上到是显得各有不同,如JS里在定义变量时,你要用var去声局部变量的声明,而对于弱类型的语言JS来说,你也可以不加var,但不加它会认为这个变量为全局变量,这是要注意的. 变量 在程序运行过程中,其值可以发生改变的(呵呵,10多年前书上的定义) var people ; //声明一个名为pe

  • AngularJS基础知识笔记之表格

    表格数据本质上通常是重复的.ng-repeat指令,可以用来方便地绘制表格.下面的示例说明使用ng-repeat指令来绘制表格. <table> <tr> <th>Name</th> <th>Marks</th> </tr> <tr ng-repeat="subject in student.subjects"> <td>{{ subject.name }}</td>

  • JavaScript基础知识之数据类型

    数据类型 JavaScript中有5种简单数据类型(也称为基本数据类型):Undefined.Null.Boolean.Number和String.还有1种复杂数据类型--Object,Object本质上是由一组无序的名值对组成的. typeof操作符 介于JavaScript是松散类型的,因此需要有一种手段来检测给定变量的数据类型--typeof就是负责提供者方面信息的操作符.对一个值使用typeof操作符可能返回下列某个字符串: ● "undefined"--如果这个值未定义: ●

  • 7个JS基础知识总结

    1.如何在一个对象上添加属性? 方法一:var b = {};b["name"] = "test";delete b.name 删除对象的属性方法二:b.name ="test";2.如何判断一个变量是否声明?typeof(a) =="undefined"typeof(d) =="function" 是否为函数 3.怎么表示为字符串? 通过双引号(""),单行号(''),反斜杠(//) 

  • 第二次聊一聊JS require.js模块化工具的基础知识

    前一篇:JS模块化工具我们以非常简单的方式引入了requirejs:http://www.jb51.net/article/82527.htm,这一篇将讲述一下requirejs中的一些基本知识,包括API使用方式等 基本API require会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短 define 从名字就可以看出这个api是用来定义一个模块 require 加载依赖模块,并执行加载完后的回调函

  • JavaScript基础知识点归纳(推荐)

    定义在函数外的变量一定是全局变量:定义在函数内的变量,如果声明了var,那该变量就是局部变量,如果不声明var,那么该变量就是全局变量. 1.全局变量与局部变量 JavaScript var global = "Global"; test(); function test(){ var local = "Local"; document.writeln(global); document.writeln(local); } document.writeln(glob

  • javascript基础知识讲解

    本篇适合javascript新手或者学了前端一段时间,对js概念不清晰的同学~~. 学习目的 本文针对javascript基础薄弱的同学,可以加深对javascript的理解. 本文将讲述以下几点对于初学者开说javascript(有的是大部分语言都有的)的坑 讲解内容如下: 1. 连等 2. i++ 3. 包装对象 4. 引用类型 5. && 与 || 讲解部分 1. 连等 小试牛刀 连等是常见的表达式,但是并不是所有情况都适合连等,连等只适用于字面量并不适用于引用类型. // 字面量连

  • javascript基础知识整理

    1 创建脚本块 程序代码 复制代码 代码如下: <script language="JavaScript"> JavaScript 代码写在这里面 </script> 2 隐藏脚本代码 程序代码 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 在不支持JavaScript的浏览器中将不执行相关代码 3 浏览器不支持的时候显示 程序代码 复制代码 代码如下: <noscript> Hello to the non-JavaScript br

  • JavaScript 语言基础知识点总结(思维导图)

    JavaScript 数组 JavaScript 函数基础 Javascript 运算符 JavaScript 流程控制 JavaScript 正则表达式 JavaScript 字符串函数 JavaScript 数据类型 JavaScript 变量 Window 对象 DOM 基本操作    由于上面的图片比较大,建议大家下载到本地查看

  • Vue.js基础知识汇总

    介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式的ViewModel层,它连接视图和数据绑定模型通过两种方式.实际的DOM操作和输出格式被抽象的方式到指令(Directives)和过滤器(Filters) 在哲学领域内,尽量让MVVM数据绑定API尽可能简单.模块化和可组合性也是重要的设计考虑.vue不是一个全面的框架,它被设计成简单的和灵活的.你可以用它快速原型,或混合和匹配与其他库定义前端堆栈. Vue.js的API是参考了AngularJS

  • javascript学习笔记(一)基础知识

    基本概念 javascript是一门解释型的语言,浏览器充当解释器. js执行引擎并不是一行一行的执行,而是一段一段的分析执行. 延迟脚本 HTML4.0.1中定义了defer属性,它的用途是表明脚本在执行时不会影响页面的构造.也就是说,脚本会延迟到整个页面都解析完毕后再执行.因此,在<script>元素中设置defer属性,相当于告诉浏览器立即下载,但延迟执行.在XHTML文档中,要把defer属性设置为defer="defer" 异步脚本 html5为<scrip

随机推荐