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 继承使用分析
May 12 Javascript
关于jquery css的使用介绍
Apr 18 Javascript
jquery实现控制表格行高亮实例
Jun 05 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
Feb 19 Javascript
javascript获取flash版本号的方法
Nov 20 Javascript
直接拿来用的页面跳转进度条JS实现
Jan 06 Javascript
vue 2.0路由之路由嵌套示例详解
May 08 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
Feb 09 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
May 23 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
js+canvas绘制图形验证码
Sep 21 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 nl2br()格式化输出的详解
2013/06/05 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
PHP基于DOM创建xml文档的方法示例
2017/02/08 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
js利用div背景,做一个竖线的效果。
2008/11/22 Javascript
Jvascript学习实践案例(开发常用)
2012/06/25 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
常用的几段javascript代码分享
2014/03/25 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
JS获取年月日时分秒的方法分析
2016/11/28 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
Bootstrap框架安装使用详解
2017/01/21 Javascript
详解vue-resource promise兼容性问题
2017/06/20 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
17个Python小技巧分享
2015/01/23 Python
Python中类型关系和继承关系实例详解
2015/05/25 Python
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
itchat-python搭建微信机器人(附示例)
2019/06/11 Python
selenium中get_cookies()和add_cookie()的用法详解
2020/01/06 Python
Python 使用office365邮箱的示例
2020/10/29 Python
Python 远程开关机的方法
2020/11/18 Python
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
《罗布泊,消逝的仙湖》教学反思
2014/03/01 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
琅琊山导游词
2015/02/05 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python
详解MySQL的内连接和外连接
2023/05/08 MySQL