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中json使用自己总结
Aug 13 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
Sep 17 Javascript
可以浮动某个物体的jquery控件用法实例
Jul 24 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
Nov 01 Javascript
js 点击a标签 获取a的自定义属性方法
Nov 21 Javascript
JS两种类型的表单提交方法实例分析
Nov 28 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
Dec 07 Javascript
js最简单的双向绑定实例讲解
Jan 02 Javascript
完美解决axios跨域请求出错的问题
Feb 05 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 Javascript
webpack 代码分离优化快速指北
May 18 Javascript
bootstrap table插件动态加载表头
Jul 19 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
自动跳转中英文页面
2006/10/09 PHP
php一个找二层目录的小东东
2012/08/02 PHP
CI框架源码阅读,系统常量文件constants.php的配置
2013/02/28 PHP
thinkphp备份数据库的方法分享
2015/01/04 PHP
PHP实现json_decode不转义中文的方法
2017/05/20 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
javascript数组的扩展实现代码集合
2008/06/01 Javascript
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
js获取客户端操作系统类型的方法【测试可用】
2016/05/27 Javascript
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
artDialog+plupload实现多文件上传
2016/07/19 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
Pyramid添加Middleware的方法实例
2013/11/27 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
Python内置函数——__import__ 的使用方法
2017/11/24 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
如何运行.ipynb文件的图文讲解
2019/06/27 Python
django认证系统实现自定义权限管理的方法
2019/08/28 Python
Python:type、object、class与内置类型实例
2019/12/25 Python
解决python使用list()时总是报错的问题
2020/05/05 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
Python内存泄漏和内存溢出的解决方案
2020/09/26 Python
电大自我鉴定范文
2013/10/01 职场文书
小学教师师德感言
2014/02/10 职场文书
企业法人授权委托书
2014/04/03 职场文书
2014年房产经纪人工作总结
2014/12/08 职场文书
销售内勤岗位职责
2015/02/10 职场文书
大学生自我评价范文
2015/03/03 职场文书