js私有化属性

我们先来看一个例子:

var Demo1 = function(val){
      this.value = val;
      this.getValue = function(){
            return this.value;
    }
};

var demo1Obj = new Demo1(1);
alert(demo1Obj.value); // 1
demo1Obj.value = 0;
alert(demo1Obj.getValue()); // 0

Demo1的对象都会有一个value属性,在new的时候进行初始化。但是value本身却不是私有属性,我们可以通过‘.value‘的方式直接访问改属性。

但是如何将value属性私有化呢?

这里主要问题就是定义value变量直接定义在了this对象的属性上,这就让每个Demo1的对象都拥有了value属性,

其实我们可以将value定义为只存在于对象初始化时,让value变成Demo1函数中的局部变量,这样其他在函数外部就访问不到了,同时我们也给于其对象以访问该属性的接口

如:

var Demo1 = function(val){
      var value = val;
      this.getValue = function(){
            return value;
      };
      this.increment = function(inc){
           value += inc;
      }
};

var demo1Obj = new Demo1(1);
alert(demo1Obj.value); // 0
demo1Obj.value = 0;
demo1Obj.increment(4);
alert(demo1Obj.getValue()); // 5

其实我们可以用到闭包的知识,

如下例所示:

var Demo2 = function(val){  var value = val;
    return {     increment: function(inc){      if(typeof inc === ‘number‘){        value += inc;      }     },
        getValue : function(){
            return val;
        }
    }
};

var demo2Obj = new Demo2(4);
alert(demo2Obj.getValue());  // 4alert(demo2Obj.val);//undefined

在Demo2中,实例化对象后发挥的是一个新的结构体,该结构体中的方法可以访问到他被创建时的上下文,就是我们所说的闭包。我们可以调用该闭包中的函数getValue,获取在实例化时传入的参数val的值。

注:这里在闭包中访问到的值,也不是该属性值的拷贝,而是其本身,因而increment中是可以对其进行修改的。

而且value的值是无法在外部直接获取到的,这就实现了对象属性的封装,同时也可以通过闭包的形式对其进行相应权限的操作。

总之,私有化属性的方法就是不将属性直接定义在this对象上,而是放到整个函数的局部变量中。

js私有化属性

时间: 2024-10-12 09:30:45

js私有化属性的相关文章

JS操作属性、样式

JS操作属性:aaa.getAttribute("属性名"); - 取出aaa这个dom对象的属性名中的属性值 aaa.removeAttribute("属性名"); -移除该属性 aaa.setAttribute("属性名","值"); --添加/修改此属性 window.setTimeout("b()", 3000); --等待3秒,执行b这个方法,执行一遍window.setInterval('aaa

JS操作属性和样式

JS操作属性:aaa.getAttribute("属性名"); - 取出aaa这个DOM对象的属性名中的属性值aaa.removeAttribute("属性名"); -移除该属性aaa.setAttribute("属性名","值"); --添加/修改此属性 window.setTimeout("b()", 3000); --等待3秒,执行b这个方法,只执行一遍.window.setInterval('aaa

动态设置js的属性

目标:js的属性名可以使用变量 举例:js对象object,当赋给该对象属性的时候可以采用以下方式 var object; object.prop1 = "value1"; object.prop2 = "value2"; 也可以采用如下方式: object.push({prop1:"value1"}); object.push({prop2:"value2"}); 在这里prop1 作为属性名称,可以直接用,也可以加上引号,

遍历js对象属性

<script type="text/javascript"> var p = { a:'a', e:{ a:'a', c:'c' }, b:'1', c:{ a:2, x:'fffff', y:{ ee:'fff', f:200 } } } ; //遍历js对象属性 var ObjInfo = { /** @param obj 要遍历的对象 @param placeholder 占位符,排版用,如空格 */ info : function(obj,placeholder)

js第一节-js的属性操作

js第一节-js的属性操作 今天我们第一节的内容主要跟大家聊聊js的属性操作,那么什么是属性呢?属性就是对于一个事物的描述,比如一个元素它的id,它的value值等.每个元素都有其自己本有的属性,也有我们给它定义的属性--自定义属性,总之这些都是描述其元素独有特性的.现在呢,我通过两个实例跟大家讲解一下什么是js的属性操作. 一.第一个实例是:图片的轮播图 效果图: 图1:加载的时候 图2:加载之后 HTML代码和CSS代码: JS代码: 上面用到了var oId = document.getE

JS中&quot;属性&quot;的用法

JS的属性和C#有相似之处  ! 使用get和set来进行属性的获取和设置 var obj={ a:"1", get age(){ return obj.a; }, set age(value){ obj.a=value; } }; onload = function() { alert(obj.age); obj.age="10"; alert(obj.age); }

Vue.js 计算属性

Vue.js 计算属性 使用计算属性的实例: <!DOCTYPE html> <html> <head> <meta cahrset="utf-8"> <title>computed</title> <script src="vue.min.js"></script> </head> <body> <div id="app"

js 位置属性offsetLeft,offsetTop,scrollLeft,scrollTop等测试

一直对这几个属性,有点模糊,今天有时间,好好研究一下. 一下上网上前辈写的关于这方面的博客链接: http://blog.csdn.net/wgw335363240/article/details/5580654 http://blog.csdn.net/fswan/article/details/17238933 看了几篇之后,有点小懂,还是亲身测试一下比较好,实践是检验真理的唯一标准.嘿嘿!! 下面是我写的demo的截图.这个demo上列出了,js的常用位置属性,可以拖拽.缩放元素,来观察各

Python 私有化属性

# 对象的基本理论 # 什么事对象? # 万物皆对象 # 对象是具体物体 # 拥有属性 # 拥有行为 # 把很多零散的东西,封装成为一个整体 # 举例:王二小 # 属性 # 姓名 # 年龄 # 身高 # 体重 # 行为 # 走路 # 吃饭 # 放羊 # Python中的体现 # 是一门特别彻底的面向对象编程(OOP)的语言 # 其他语言:基本数据类型,对象类型 # python全部类型都是对象类型 # 面向对象是面向过程的封装 # 对象和类的关系:对象 可以抽象为类 类可以实例化为对象 clas