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 相关文章推荐
Javascript 篱式条件判断
Aug 22 Javascript
不一样的文字闪烁 轮番闪烁
Nov 11 Javascript
jquery 1.4.2发布!主要是性能与API
Feb 25 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
Nov 19 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
Jul 01 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 Javascript
JavaScript+HTML5实现的日期比较功能示例
Jul 12 Javascript
jQuery实现菜单栏导航效果
Aug 15 jQuery
详解extract-text-webpack-plugin 的使用及安装
Jun 12 Javascript
js数据类型检测总结
Aug 05 Javascript
vue根据值给予不同class的实例
Sep 29 Javascript
jQuery 移除事件的方法
Jun 20 jQuery
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 选项及相关信息函数库
2006/12/04 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
使用pthreads实现真正的PHP多线程(需PHP5.3以上版本)
2014/05/05 PHP
php + ajax 实现的写入数据库操作简单示例
2020/05/16 PHP
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
JS 时间显示效果代码
2009/08/23 Javascript
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
动态加载JS文件的三种方法
2013/11/08 Javascript
JQuery动态添加和删除表格行的方法
2015/03/09 Javascript
使用jquery制作弹出框效果
2015/04/03 Javascript
浅谈jquery.fn.extend与jquery.extend区别
2015/07/13 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
vue单页应用中如何使用jquery的方法示例
2017/07/27 jQuery
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
[49:27]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第一场
2018/04/05 DOTA
[38:23]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第二场 11.01
2020/11/02 DOTA
Python判断一个文件夹内哪些文件是图片的实例
2018/12/07 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
Python使用进程Process模块管理资源
2020/03/05 Python
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
2013/06/09 HTML / CSS
canvas使用注意点总结
2013/07/19 HTML / CSS
链表面试题-一个链表的结点结构
2015/05/04 面试题
销售工作人员的自我评价分享
2013/11/10 职场文书
幼儿园园长岗位职责
2013/11/26 职场文书
微观物理专业自荐信
2014/01/26 职场文书
教育技术学专业职业规划书
2014/03/03 职场文书
环境保护标语
2014/06/20 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书
幸福家庭事迹材料
2014/12/20 职场文书
留学推荐信怎么写
2015/03/26 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
庆元旦主持词
2015/07/06 职场文书
教学工作总结范文5篇
2019/08/19 职场文书
Python 语言实现六大查找算法
2021/06/30 Python