JavaScript 中级笔记 第五章 面向对象的基础

ttx9n

对象是JavaScript的基础。从最基本的层次上说，对象是一系列属性的集合。 一，面向对象的基础
对象是JavaScript的基础。从最基本的层次上说，对象是一系列属性的集合。
1,对象的创建
<script type="text/javascript"> //创建一个新的Object对象，存放在obj变量中 var obj1 = new Object(); //设置属性 obj1.value = 5; obj1.click = function(){ alert("Hello"); } //另一种方式定义一个对象，以键值(key/value)的方式定义属性 var obj2 = { value : 5, click : function(){ alert("Hello"); } }; </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相信很多朋友对这些创建对象的方式接触过很多次了，都很熟悉了。
2，对象的使用
和其他面向对象语言不同的是，JavaScript没有类的概念。在JavaScript里，任何函数都可以被实例化为一个对象。
<script type="text/javascript"> //一个简单的函数，接受名称并将其放入当前上下文中 function User(name){ this.name = name; } var me = new User("cssrain");//指定名称来创建该函数的一个新对象 alert( me.name );//"cssrain" alert( me.constructor == User );//true //如果把User当作函数 User("peter"); alert( window.name );//因为它的this上下文对象未设定，所以默认是全局的window对象 </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
本段代码通过new User()来创建函数的一个新的对象。创建出的新对象拥有name属性，并且construtor属性指向创建它的函数。
3，公共方法
公共方法是在对象的上下文中用户始终可以接触到的。要实现这种方法，需要用到原型属性——prototype。
对象的原型仍然是对象。给原型对象添加属性后，由该原型实例化的每个对象都可以访问这些属性，即这些属性都是公有化的。
<script type="text/javascript"> //一个简单的函数，接受名称并将其放入当前上下文中 function User(name){ this.name = name; } //将一个新的函数添加到此对象的prototype对象中 User.prototype.getName = function(){ return this.name; } var me = new User("cssrain");//指定名称来创建该函数的一个新对象 alert( me.getName() ); //"cssrain" </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
4，私有方法
这个还比较好理解。字面意思是只能在内部访问。
<script type="text/javascript"> //一个简单的函数，接受名称并将其放入当前上下文中 function User(name){ this.name = name; function disp(){ alert("User()函数 私有的"); } //只能内部调用 disp(); } var me = new User("cssrain");//指定名称来创建该函数的一个新对象 //me.disp();//不能调用 //disp();//不能调用 </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
5，特权方法
它是以公共的方式访问私有变量。
<script type="text/javascript"> function User(name,age){ //私有变量 var year = (new Date()).getFullYear()-age; //创建一个特权方法，能够访问year变量，同时属于公共可访问 this.getBornYear = function(){ return year; } } var me = new User("cssrain",22);//指定参数来创建该函数的一个新对象 alert( me.getBornYear() );//"1986" </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
本质上，特权方式是动态生成的。因为它们是在运行时才添加到对象中的，而不是在代码第一次编译时就已经生成。
这种动态生成代码的能力不可小视，能根据与你想那个时变量来生成代码是非常有用的。看下面动态生成方法的例子：
<script type="text/javascript"> function User( users ){ for(var i in users){//遍历所有的属性 (function(method){ var p = i; method["get"+p]=function(){//创建此属性的一个读取函数 return users[p]; } method["set"+p]=function(val){//创建此属性的一个设置函数 users[p] = val; } })(this); } } var me = new User({name : "cssrain", age : 22});//指定参数来创建该函数的一个新对象 alert( me.getname() );//"cssrain" alert( me.getage() );//"22" me.setname("changeCssRain"); me.setage(23); alert( me.getname() );//"changeCssRain" alert( me.getage() );//"23" </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
6，静态方法
静态方法的实质跟一般函数没有什么不同，静态方法能保证对象的命名空间的整洁。
<script type="text/javascript"> function User(name,age){ this.name = name; this.age = age; } //添加到一个User对象的静态方法 User.cloneUser = function(user){ //创建并返回一个新的User对象 return new User( user.name , user.age ); } var u = User.cloneUser({name:"cssrian",age:22}); alert(u.name);//"cssrain" alert(u.age);//22 </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
二，小结
理解本章所描述的概念和内容是非常重要的， 这是完全掌握专业JavaScript的起点。

rveqwdpw5

啦啦啦啦啦啦啦啦！

w18pvaep

好东西一定要看看！

q42obh

大家都不容易！

kestlhoxn

天天源码社区。。。。

w18pvaep

先把创新班才能下班才能下班

小伙伴

抽根烟，下来看看再说

thywok

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦

q215357618

sdsadsadsadf

.l4

刷屏刷屏刷屏