2017.02.24 Javascript 面向对象编程1--封装
来源:互联网 发布:苹果应用下载软件 编辑:程序博客网 时间:2024/06/06 04:34
1 封装
1.1 私有变量和私有函数
JavaScript的函数作用域,在函数内定义的变量和函数如果不对外提供接口,那么外部将无法访问到,也就是变为私有变量和私有函数。
function animal(name){ var type="cat",//私有变量 say=function(){alert("wawawa")};//私有函数}alert(type);//undefined
在函数对象animal外部无法访问变量type和函数say,它们就变成私有的,只能在animal内部使用,即使是函数animal的实例仍然无法访问这些变量和函数.
var dog=new animal("seven");alert(dog.type);//undefined
1.2 构造函数模式
为了解决从原型对象生成实例的问题,Javascript提供了一个构造函数(Constructor)模式。
所谓”构造函数”,其实就是一个普通函数,但是内部使用了==this==变量。对构造函数使用==new==运算符,就能生成实例,并且this变量会绑定在实例对象上。
function animal(name,age){ this.name=name; this.age=age;}var cat=new animal("tom",23);var dog=new animal("jerry",24);console.log(cat.name);//tomconsole.log(dog.age);//24
cat和dog会自动含有一个constructor属性,指向它们的构造函数。
console.log(cat.constructor===animal);//true
Javascript还提供了一个instanceof运算符,验证原型对象与实例对象之间的关系。
console.log(cat instanceof animal);//true
注意,instanceOf是一个操作符,不是一个方法,所以用法是a instanceOf b
1.3 构造函数的问题
function animal(name,age){ this.name=name; this.age=age; this.type="animal"; this.say=function(){alert("hello")}}var cat=new animal("tom",23);var dog=new animal("jerry",24);console.log(cat.type);//animaldog.say();//hello
表面上好像没什么问题,但是实际上这样做,有一个很大的弊端。那就是对于每一个实例对象,type属性和say()方法都是一模一样的内容,每一次生成一个实例,都必须为重复的内容,多占用一些内存。这样既不环保,也缺乏效率。
console.log(cat.say===dog.say);//false
利用原型(Prototype)模式就可以让type属性和say()方法在内存中只生成一次,然后所有实例都指向那个内存地址呢从而提升性能。
1.4 原型Prototype
无论什么时候,只要创建了一个新函数,该函数就会有一个prototype属性,这个属性也是一个对象,默认情况下prototype属性会默认获得一个constructor(构造函数)属性,这个属性是一个指向prototype属性所在函数的指针(及函数自己)。
function animal(name,age){ this.name=name; this.age=age;}animal.prototype.type=animal;animal.prototype.say=function(){ alert("hello")};var cat=new animal("tom",23);var dog=new animal("jerry",24);console.log(cat.__proto__.constructor.name);//animalconsole.log(animal.prototype.constructor.name);//animal
构造函数的prototype的constructor指向构造函数本身,而实例的将包含一个proto指针,指向构造函数的prototype。
注意,实例是没有prototype属性的,通过new关键字声明的实例获得的是指向其构造函数的prototype的proto指针。
每一个函数被创建时,都会自动的拥有prototype属性。这个属性并无什么特别之处,它和其他的属性一样可以访问,可以赋值。不过当我们用 new关键字来创建一个对象的时候,prototype就起作用了:它的值(也是一个对象)所包含的所有属性,都会被关联到新创建的实例对象的proto指针上。
1.5 利用原型Prototype创造实例
每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。
这意味着,我们可以把那些不变的属性和方法,直接定义在prototype对象上。
就像上面的例子一样,此时所有实例的type和say方法都是指向同一个内存地址,提高了运行效率。
console.log(cat.say===dog.say);///true
1.6 Prototype模式的验证方法
为了配合prototype属性,Javascript定义了一些辅助方法,帮助我们使用它。
1.6.1 isPrototypeOf()
这个方法用来判断,某个proptotype对象和某个实例之间的关系。
console.log(animal.prototype.isPrototypeOf(cat));//trueconsole.log(animal.prototype.isPrototypeOf(dog));//trueconsole.log(animal.prototype.isPrototypeOf(animal));//false
1.6.2 hasOwnProperty()
每个实例对象都有一个hasOwnProperty()方法,用来判断某一个属性到底是本地属性,还是继承自prototype对象的属性
console.log(cat.hasOwnProperty("name"));//trueconsole.log(cat.hasOwnProperty("say"));//false
1.6.3 in运算符
in运算符可以用来判断,某个实例是否含有某个属性,不管是不是本地属性.
console.log(cat.hasOwnProperty("say"));//falseconsole.log("say" in cat);//true
in运算符还可以用来遍历某个对象的所有属性.
for(var i in cat){ var str=""; str="cat["+i+"]:"+cat[i]; console.log(str)}/*运行结果cat[name]:tomtest11.js:29 cat[age]:23test11.js:29 cat[say]:function (){alert("hello")}*/
1.7 注意事项
1 只能把不变的属性和方法,绑在prototype对象上,而不能把可变属性绑上去。
2 用new的这种方法构造对象,如果忘记加上new,“即没有编译时警告,也没有运行时警告”,所以为了避免忘记加 new,最好的办法是类名首字母大写。
参考(阮一峰的网络日志)
http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html
http://www.jb51.net/article/40964.htm
- 2017.02.24 Javascript 面向对象编程1--封装
- Javascript面向对象编程(1):封装
- javascript面向对象编程封装
- Javascript面向对象编程:封装
- Javascript 面向对象编程:封装
- javascript面向对象编程:封装
- JavaScript面向对象编程-封装
- Javascript 面向对象编程:封装
- javaScript面向对象编程-封装
- Javascript 面向对象编程:封装
- Javascript 面向对象编程 封装
- JavaScript面向对象(1)-封装
- javascript:面向对象编程基础:封装
- Javascript 面向对象编程(一):封装
- javascript 面向对象编程基础:封装
- Javascript 面向对象编程(一):封装
- Javascript 面向对象编程(一):封装
- Javascript 面向对象编程(一):封装
- Java中的类和对象的理解
- js实现闪烁效果
- svn搭建
- ACM 海贼王之伟大航路(深搜剪枝)
- LeetCode #1 Two Sum
- 2017.02.24 Javascript 面向对象编程1--封装
- sizeof计算类的大小
- JSONObject与JSONArray
- LeetCode 1. Two Sum
- 在半个中国象棋棋盘上,马在左下角(1,1)处,马走日字,求到指定位置有多少种走法
- PAT甲级1014. Waiting in Line (30)
- MPEG-2 TS学习(六)tsfilter源码阅读(3)TS的解析流程
- C++ 实现反射(一)
- 彼岸书店小览