上篇博客中解说了一些js对象的基本概念和使用方法。这篇博客解说一下js属性方面的:公有属性。私有属性,特权方法。

假设学过java。公有属性。私有属性,特权方法(即能够訪问和设置私有属性的方法)一定非常熟悉。那么让我们来看看在js里怎样实现呢?

1、公有属性

首先看公有的第一层意思是能够被大家所訪问的。对外开放的属性,是相对于私有属性而言的:

function Person(name,age){
this.name=name;
this.age=age;
this.getName=function(){
return this.name;
}
this.getAge=function(){
return this.age;
}
}
var josh=new Person('josh','25')
console.log(josh.name); //josh
console.log(josh.getName()); //josh

我们在这里定义了一个叫josh的Person对象,让我们通过new方法再创建2个其它Person对象

var Eric=new Person('Eric','25');
var mongo=new Person('mongo','23');
console.log(Eric.name); //Eric
console.log(mongo.name); //monge

        这里我们每次new一个对象的时候。Person中全部的代码都会复制一份,便造成了内存的浪费。能够通过定义同一类对象共同拥有的方法来解决问题。因此在这里须要prototypekeyword来我们。

        从字面上来看。prototype能够理解为"property to type",即类型的属性。对于一类的属性。拿上面定义的Person来说。即对Person这一类对象共同拥有的方法或属性。我们改造一下上面的代码

function Person(name,age){
this.name=name;
this.age=age; }
Person.prototype.getName=function(){
return this.name;
}
Person.prototype.getAge=function(){
return this.age;
} var josh=new Person('josh','25')
var Eric=new Person('Eric','25');
var mongo=new Person('mongo','23');
console.log(josh.getName()); //josh
console.log(Eric.name); //Eric
console.log(mongo.name); //monge

         因此公有方法或属性,也能够理解为通过构造函数的prototype加入的方法或属性,这里的构造函数即Person。由于js中不存在类的概念,所以我们通过构造函数来创建新的对象,而通过prototype定义的属性方法。为这一类所共享,像极了java中类里的静态方法或属性为一类所共享。

2、私有属性

        基于面对对象的封装特性。我们并不想把全部变量都公开给外界,于是拿上面的Person对象来说,我们把属性定义中的this.name被换成了var name。于是能够被外界訪问的公有属性就变成了私有属性,对于属性的訪问结果也变成了undefined

function Person(name,age){
//this.name被换成了var name
var name=name;
var age=age;
} var josh=new Person('josh','25')
var Eric=new Person('Eric','25');
var mongo=new Person('mongo','23');
console.log(josh.name); //undefined
console.log(Eric.name); //undefined
console.log(mongo.name); //undefined

为什么this.name被换成了var name,对象属性就由公有变私有了呢?首先看thiskeyword。this表示当前属性所存在的对象:

function Person(name,age){
this.name=name;
this.age=age;
}

上面这段代码换成了以下这段,您就能够看明确了,即首先定义一个Person空构造函数,然后定义person对象,再依据person动态增减属性的特性添加name和age属性

function Person(){
}
var person=new Person();
person.name='josh';
person.age='25';

那么换成var name的私有属性又是怎样实现的呢?这里就要设计js面对对象的几个重要基础概念了,各自是 作用域,上下文,闭包。

          首先说作用域。大家假设接触过一门编程语言就应该有了解,作用域是当前定义的变量能够再什么样的范围内被引用。拿大家比較比較熟悉的java来说。java是块级的,在if、while这些块中定义的。仅仅能在块里用。出了块就不行了;假设想范围大一些。能够在方法的開始定义,供整个方法是用。但在方法外不能被是用;也能够定义类级的,在整个类内都能引用。

         在js中,作用域是函数级的。也就是在函数内定义的变量。在函数外不可引用,函数起到了界定作用域的作用。上文的这个样例中,对于josh.name属性的訪问就变成了undefined。

function Person(name,age){
//this.name被换成了var name
var name=name;
var age=age;
}
var josh=new Person('josh','25');
console.log(josh.name); //undefined

接下来解释上下文。上下文表明了函数或者对象处在的环境,这个环境中包括了一些变量。对象或者函数。结合作用域的概念一起看一张图

         对着这张图来说,person对象能够訪问上下文中的变量,对象或者是函数,而上下文中的变量不能訪问Person对象的name属性。由于name属性的作用域是局限在person对象内的,也就是外层对内层开放,内层对外层关闭。

         那么由此就衍生出了闭包的概念,闭包就是一个封闭的包,能拒绝外层的訪问,上图person对象就是一个闭包,包外不能訪问包内私有的变量,仅仅能通过某些特殊方式(特权方法)来訪问。接下来介绍下特权方法。

3、特权方法

特权方法相当于java类中对私有变量提供訪问和设置的get/set方法

function Person(){
//在私有属性前加下划线。表示私有属性
var _name;
var _age;
this.getName=function(){
return _name;
}
this.getAge=function(){
return _age;
}
this.setName=function(name){
_name=name;
}
this.setAge=function(age){
_age=age;
}
} var josh=new Person();
josh.setName('josh');
josh.setAge('25');
console.log(josh.getName());
console.log(josh.getAge());

          到此。共同拥有属性,私有属性,闭包的概念就讲完了,本篇博客用非常小的篇幅将了闭包这个概念,但却说明了闭包最根本的实质,函数所处的上下文没有权利訪问函数内定义的变量。于是就形成了闭包(一个封闭的包)。大家有了这个概念,再看闭包的文章,一定会非常受用。

js面对对象编程(二):属性和闭包的更多相关文章

  1. js面对对象编程

    说到js,非常大一部分人会说我非常熟悉,在日常的web开发中经经常使用,那么你的js代码是符合面对对象思路的吗?那你会问我面向过程的js代码有什么不好吗?我的感受是面对对象的js编码更加简洁,降低了混 ...

  2. 对js 面对对象编程的一些简单的理解

    由简单开始深入: 最简单的 直接对象开始 var desen = { age:24, name:'xyf', job:'fontEnd', getName:function(){ console.lo ...

  3. 面对对象编程(OOP, Object Oriented Programming)及其三个基本特性

    一千个读者,一千个哈姆雷特.对于面对对象编程,书上都会告诉我们它有三个基本特性,封装,继承,多态,但谈起对这三点的见解,又是仁者见仁智者见智,感觉还是得多去编程中体验把 . 面向对象编程(OOP, O ...

  4. python面对对象编程----2:__init__

    面对对象编程估计我们最早接触到的就是__init__了,也就是实例的初始化处理过程: 1:来看看最基础的__init__ class Card(object): #抽象类Card,并不用于实例化 de ...

  5. Python学习6——再谈抽象(面对对象编程)

    1.对象魔法 在面对对象编程中,术语对象大致意味着一系列数据(属性)以及一套访问和操作这些数据的方法. 使用对象而非全局变量以及函数的原因有多个,而最重要的好处不过以下几点: 多态:可对不同类型的对象 ...

  6. C++ 基础语法 快速复习笔记---面对对象编程(2)

    1.C++面对对象编程: a.定义: 类定义是以关键字 class 开头,后跟类的名称.类的主体是包含在一对花括号中.类定义后必须跟着一个分号或一个声明列表. 关键字 public 确定了类成员的访问 ...

  7. Day-8: 面对对象编程

    面对过程的程序设计方法意在将函数分成子函数,再依次调用这些函数来解决问题. 而面对对象的程序设计方法,来源于自然界,类是实例的抽象,实例是类的具体.自定义出来的对象是类,而所有的数据都可以看成是对象, ...

  8. javascript面对对象编程 之继承

    上一篇博客中为大家介绍了javascript面向对象编程原则的封装,今天为大家介绍继承.在javascript中没有类的概念,全部不能像c#.java语言那样.直接的用类去继承类.比方如今有比方.如今 ...

  9. go 学习笔记之go是不是面向对象语言是否支持面对对象编程?

    面向对象编程风格深受广大开发者喜欢,尤其是以 C++, Java 为典型代表的编程语言大行其道,十分流行! 有意思的是这两中语言几乎毫无意外都来源于 C 语言,却不同于 C 的面向过程编程,这种面向对 ...

随机推荐

  1. ASP.NET Repeater控件实现简单分页

    早上,有看MSDN,看到了 PagedDataSource 类 http://msdn.microsoft.com/zh-cn/library/system.web.ui.webcontrols.pa ...

  2. C#读取“我的文档”等特殊系统路径及环境变量

    返回“我的文档”路径字符串 Environment.GetFolderPath(Environment.SpecialFolder.Personal) 本技巧使用GetFolderPath方法来获取指 ...

  3. java自动探测文件的字符编码

    Mozilla有一个C++版的自动字符集探测算法代码,然后sourceforge上有人将其改成java版的~~ 主页:http://jchardet.sourceforge.net/ jchardet ...

  4. 100行代码实现现代版Router

      原文:http://www.html-js.com/article/JavaScript-version-100-lines-of-code-to-achieve-a-modern-version ...

  5. java.lang.IllegalArgumentException: findUserById is ambiguous in Mapped Statements collection

    这是由于mybatis的mapper  xml文件中的id 名字和mybatis内置的方法可能有冲突导致的,  更改xml 的id  名字就可以了!

  6. layui 三级菜单

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  7. js-权威指南-Web套接字

    HTTP是一种无状态的协议,,由客户端请求和服务端响应组成.HTTP实际上是比较特殊的网络协议. 大多数基于因特网的网络连接通常包含长连接和基于TCP套接字的双向消息交换.让不信任的客户端脚本访问底层 ...

  8. CSS编辑元素的浮动

    1.元素浮动: 1)使用 float:left; 这样的格式设置元素的浮动方式,属性值可以是left,right: 2)元素设置为左浮动时,元素将从原区域浮动到浏览器的左侧页面:右浮动时,就会附在右侧 ...

  9. 高德地图 JS API - 根据经纬度获取周边建筑地标

    像我们经常用的微信或微博,发表动态时都有选择位置的功能,根据当前的定位获取附近的地标.利用高德地图我们就可以实现这样的功能. 1. 具体代码: // 高德地图查询周边 function aMapSea ...

  10. 葡萄城报表模板库再次更新!补充医院Dashboard及房地产销售行业报表

    新增模板介绍 近日,葡萄城报表再次对报表模板库进行了更新,除了补充医院用于整体运营监控的5张 Dashboard 报表外,还增加了房地产销售场景中常见的12张报表. 5张 Dashboard 报表模板 ...