视频1
视频21
视频41
视频61
视频文章1
视频文章21
视频文章41
视频文章61
推荐1
推荐3
推荐5
推荐7
推荐9
推荐11
推荐13
推荐15
推荐17
推荐19
推荐21
推荐23
推荐25
推荐27
推荐29
推荐31
推荐33
推荐35
推荐37
推荐39
推荐41
推荐43
推荐45
推荐47
推荐49
关键词1
关键词101
关键词201
关键词301
关键词401
关键词501
关键词601
关键词701
关键词801
关键词901
关键词1001
关键词1101
关键词1201
关键词1301
关键词1401
关键词1501
关键词1601
关键词1701
关键词1801
关键词1901
视频扩展1
视频扩展6
视频扩展11
视频扩展16
文章1
文章201
文章401
文章601
文章801
文章1001
资讯1
资讯501
资讯1001
资讯1501
标签1
标签501
标签1001
关键词1
关键词501
关键词1001
关键词1501
专题2001
全部频道
首页
科技
教育
生活
旅游
时尚
美容
美食
健康
体育
游戏
汽车
元宇宙
家电
财经
综合
宠物
JavaScript中级笔记第五章面向对象的基础_javascript技巧
2020-11-27 20:44:24
责编:小采
点击下载本文
文档为doc格式
一，面向对象的基础
对象是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的起点。
下载本文
显示全文
专题
懂视 51dongshi.net 版权所有
Copyright © 2019-2025
