JS学习笔记-OO疑问之封装

封装是面向对象的基础,今天所要学习的匿名函数与闭包就是为了实现JS的面向对象封装。封装实现、封装变量,提高数据、系统安全性,封装正是面向对象的基础。

匿名函数

即没有名字的函数,其创建方式为

function(){...}

单独存在的匿名函数,无法运行,可通过赋值给变量调用或通过表达式自我执行来实现运行。

1.赋值给变量为一般的函数使用方式

var run = function(){

return ‘方法运行中‘;

};

alert(run());

2.通过表达式自我执行

(function(arguments可选)

{

alert(‘方法运行中‘);

})(arguments);

闭包

在一个普通函数的内部,创建一个匿名函数,匿名函数可访问普通函数中的变量,进而实现类似于面向对象中封装的特性,这个匿名函数就叫做对应普通函数的闭包。闭包就是对外创建的接口,通过接口达到访问函数内部变量的效果。

function
run() {

var
username = ‘Forrest‘;

return function () { //通过匿名函数返回 box()局部变量

return
username;

};

}

//alert(username);                 
//错误username
is not defined

alert(run()());

特点:闭包中使用的局部变量会驻留在内存中,避免了使用全局变量造成的命名冲突等情况的发生。值得注意的是闭包中使用this关键字,指向的是window对象。

封装

为了更好的安全性、数据保护,则需要对数据进行私有化的封装,而JS中没有块级作用域的概念(即出了{}的范围,仍可以访问声明的变量),但有了前面的基础,我们就可以达到像其他正规面向对象语言的封装效果。

         function user(){
             (function(){
                 for(i = 0; i<5; i++){
                     alert(i);
                 }
             })();
             alert(i);                          //此处无法访问变量i
         }
         //私有作用域代替全局变量
         (function(){
             var username= 'Forrest';
             alert(username);
        })();                                  //匿名函数执行完毕后,变量立即销毁

         //访问私有变量
         function User(){
             var username= Forrest;            //私有变量
	     function learn(){                 //私有函数
                 return '学习中';
             };

             //对外提供接口,间接访问内部成员
             this.userlearn = function(){
                 return username + learn();
             };
         }
         var user = new User()
         alert(user.userlearn());

         //实现get()、set()
         function User(value){
             var user = value;
             this.getUser = function(){
                 return user;
             }
             this.setUser = function(value){
                 user = value;
             }
         }
         var user = new User('Forrest');
         alert(user.getUser());
         user.setUser('Li');
         alert(user.getUser());

         //静态私有变量
         (function(){
             var user = '';
             User = function(value){
                 user = value;
             };
             Box.prototype.getUser = function(){
                 return user;
             };
             Box.prototype.setUser = function(value){
                 user = valu;
             };
         })();

         //字面量方式的私有化
         function NormalUser(){}
         var user = function(){
             var user = 'Forrest';
             function learn(){
                 return user + '学习中...';
             };
             var nu = new NormalUser();
             nu.userlearn = function(){
                 return learn();
             };
             return nu;
         }();
         alert(user.userlearn());

中结:

JS虽不是一门正统的面向对象的语言,但用它也能达到面向对象的封装、继承、多态等的效果,学习起来还是需要好好理解的,特别是对于使用JS不是特别多的人来说,只能等到以后的逐步应用来解决这一系列的问题,更进一步体会它在面向对象方面的应用。

JS学习笔记-OO疑问之封装,布布扣,bubuko.com

时间: 2024-08-02 07:02:03

JS学习笔记-OO疑问之封装的相关文章

JS学习笔记-OO疑问之对象创建

问一.引入工厂,解决重复代码 前面已经提到,JS中创建对象的方法,不难发现,基本的创建方法中,创建一个对象还算简单,如果创建多个类似的对象的话就会产生大量重复的代码. 解决:工厂模式方法(添加一个专门创建对象的方法,传入参数避免重复) function createObject(name,age){ var obj =new Object(); //创建对象 obj.name = name; obj.age = age; obj.run = function(){ return this.nam

js学习笔记知识点

AJAX用法安全限制JSONPCORS面向对象编程创建对象构造函数原型继承class继承 AJAX 用法 AJAX不是JavaScript的规范,它只是一个哥们"发明"的缩写:Asynchronous JavaScript and XML,意思就是用JavaScript执行异步网络请求 在现代浏览器上写AJAX主要依靠XMLHttpRequest对象: 'use strict'; function success(text) { var textarea = document.getE

Vue.js学习笔记(7)组件详解

在这篇文章之前小颖分享过小颖自己写的组件:Vue.js学习笔记(5)tabs组件和Tree升级版(实现省市多级联动) 先给大家看下小颖写了一个简单的组件示例: 组件: <template> <div class='content' v-if='showFlag'> <input type="text" v-bind:style='{ width:compwidth+"px"}' v-model='compvalue' @keyup='m

JS学习笔记-事件绑定

一.传统事件模型 传统事件模型中存在局限性. 内联模型以HTML标签属性的形式使用,与HTML混写,这种方式无疑造成了修改以及扩展的问题,已经很少使用了. 脚本模型是将事件处理函数写到js文件中,从页面获取元素进行对应事件函数的绑定以触发执行.但也存在不足之处: 1.一个事件绑定多个事件监听函数,后者将覆盖前者. 2.需要限制重复绑定的情况 3.标准化event对象 二.现代事件绑定 DOM2级事件定义了两个方法用于添加.删除事件:addEventListener().removeEventLi

Vue.js学习笔记:在元素 和 template 中使用 v-if 指令

f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <script src="https://cdn.bootcss.com/vue/2.2.

[Pro Angular.JS]学习笔记1.1:设置开发环境

可以使用yeoman.io,很方便.我已经写了一篇随笔,介绍如何使用.这里也有一篇介绍的文章:http://www.cnblogs.com/JoannaQ/p/3756281.html 代码编辑器,在Mac下用了一下WebStorm,太恶心了.另外发现书的作者使用的开发环境是Windows + VS Express 2013,为了方便学习,我也使用VS Express 2013 Update2.VS2013用起来蛮舒服的,把WebStorm比得跟驼屎一样.也许是因为我没用习惯吧. 1.安装Nod

【转】Backbone.js学习笔记(二)细说MVC

文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Backbone源码结构 1: (function() { 2: Backbone.Events // 自定义事件 3: Backbone.Model // 模型构造函数和原型扩展 4: Backbone.Collection // 集合构造函数和原型扩展 5: Backbone.Router // 路由

Angular JS 学习笔记

特定领域语言 编译器:遍历DOM来查找和它相关的属性, 分为编译和链接两个阶段, 指令:当关联的HTML结构进入编译阶段时应该执行的操作,可以写在名称里,属性里,css类名里:本质上是函数 稳定的DOM:绑定了数据模型的DOM元素的实例不会在绑定的生命周期发生改变 作用域:用来检测模型的改变和为表达式提供执行上下文的 AngularJS 和其它模板系统不同,它使用的是DOM而不是字符串 指令: 由某个属性.元素名称.css类名出现而导致的行为,或者说是DOM的变化 Filter过滤器:扮演着数据

Node.js学习笔记(3) - 简单的curd

这个算是不算完结的完结吧,前段时间也是看了好久的Node相关的东西,总想着去整理一下,可是当时也没有时间: 现在看来在整理的话,就有些混乱,自己也懒了,就没在整理,只是简单的记录一下 一.demo的简单介绍 这次demo,只涉及到简单的curd操作,用到的数据库是mongo,所以要安装mongo数据库,数据库连接驱动是mongoose: 当然关于mongo的驱动有很多,比如mongous mongoskin等:(详见http://cnodejs.org/topic/4f4ca8e0940ce2e