JS中的prototype与面向对象的实例讲解


Posted in Javascript onMay 22, 2013
<script language="javascript" type="text/javascript">
         //(1)把一个方法变成一个对象,为对象创建方法和属性
         var Name = function () {
             //通过prototype给一个对象创建方法
             Name.prototype.Add = function (num, title) {
             }
             //也可以直接用this加方法名为对象创建方法和上面的等价
             this.Way = function (str) {
             }
             //为对象添加属性值
             Name.prototype.xing = "123";             //定义静态属性和方法
             Name.shi = "static";
             Name.Addd = function (num, title) {
             }
             //静态定义的局部属性和方法只能在静态的类型里面用
             alert(Name.shi);
             Name.Addd(1, 2);
         }
         //方法也可以这样声明
         function Name1() {
             Name1.prototype.add = function () { }
             this.way = function () { }
             Name1.prototype.shu = "other";
         }
         //静态定义的全局属性和方法通用
         Name.sha = "static";
         Name.Addd2 = function () {
         }
         alert(Name.sha); //调用静态属性
         Name.Addd2(); //调用静态方法
         var name = new Name();
         name.Add(); //对象调用方法
         name.Way();
         alert(name.xing); //对象调用属性
         /*静态的全局变量,在方法外可以调用;静态的局部变量和方法仅限于方法内使用;实例对象不能调用静态的方法 */
         /*实例对象不能使用prototype; */
 
         //(2)Javascript面向对象 继承
         //父类
         function Class() {
             this.name = "name";
             this.method = function () {
                 alert("method");
             }
         }
         //子类
         function Class1() {
             this.name1 = "name1";
             this.method1 = function () {
                 alert("method1");
             }
         }
         //子类继承父类
         Class1.prototype = new Class();
         var obj = new Class1();
         alert(obj.name);
         alert(obj.name1);
         obj.method();
         obj.method1();
         /******  子类继承父类的语法,子类.prototype=new 父类();  *****/
         //(3)子类重写父类
         //子类
         function Class2() {
             this.name2 = "name2";
             this.method2 = function () {
                 alert("method2");
             }
         }
         Class2.prototype = new Class(); //继承
         Class2.prototype.name = "updateName"; //重写父类的属性
         Class2.prototype.method = function () {//重写父类的方法
             alert("UpdateMethod");
         }
         var obj2 = new Class2();
         alert(obj2.name); //显示updateName
         obj2.method(); //显示UpdateMethod
         alert(obj2.name2);
         obj2.method2();
         //(4){}里面的为对象
         var arr = new Array();
         arr.push({ "name": "1", "age": 12, funA: function () { } });
         arr.push({ "name": "2", "age": 13 });
         arr.push({ "name": "3", "age": 14 });
         for (var i = 0; i < arr.length; i++) {
             alert(arr[i].name);
             alert(arr[i].age);
             alert(arr[i].funA());
         }
         /****一个对象也可以这么定义***/
         var newObject = {
             "name": "Jim",
             "sex": "Man",
              Way: function () { } 
         };
     </script>
Javascript 相关文章推荐
jQuery使用手册之三 CSS操作
Mar 24 Javascript
JQUERY操作JSON实例代码
Feb 09 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
May 24 Javascript
javascript与cookie 的问题详解
Nov 11 Javascript
JQuery的ready函数与JS的onload的区别详解
Nov 21 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
浅析上传头像示例及其注意事项
Dec 14 Javascript
JavaScript使用FileReader实现图片上传预览效果
Mar 27 Javascript
javascript+css3开发打气球小游戏完整代码
Nov 28 Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 Javascript
Vue触发input选取文件点击事件操作
Aug 07 Javascript
JS定时关闭窗口的实例
May 22 #Javascript
jquery自定义属性(类型/属性值)
May 21 #Javascript
jquery实现智能感知连接外网搜索
May 21 #Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
May 21 #Javascript
Extjs407 getValue()和getRawValue()区别介绍
May 21 #Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
May 21 #Javascript
深入理解javaScript中的事件驱动
May 21 #Javascript
You might like
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
PHP的几个常用加密函数
2016/02/03 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
JS 强制设为首页的代码
2009/01/31 Javascript
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
2010/01/22 Javascript
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
javascript Array.prototype.slice的使用示例
2013/11/14 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
2014/01/26 Javascript
用循环或if语句从json中取数据示例
2014/08/18 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
2015/03/04 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
2016/05/30 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
JS判断数组那点事
2017/10/10 Javascript
微信小程序实现下载进度条的方法
2017/12/08 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
详解vue中使用微信jssdk
2019/04/19 Javascript
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
在python中画正态分布图像的实例
2019/07/08 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
Python编译成.so文件进行加密后调用的实现
2019/12/23 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
python Tornado框架的使用示例
2020/10/19 Python
python eventlet绿化和patch原理
2020/11/21 Python
Monica Vinader官网:英国轻奢珠宝品牌
2020/02/05 全球购物
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书
2014年纪检工作总结
2014/11/12 职场文书
先进个人评语大全
2015/01/04 职场文书
庆七一晚会主持词
2015/06/30 职场文书
高考升学宴主持词
2019/06/21 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书
JavaScript流程控制(分支)
2021/12/06 Javascript
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android