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动态增减控件的一些想法和小插件
Aug 01 Javascript
javascript 图片裁剪技巧解读
Nov 15 Javascript
JavaScript按位运算符的应用简析
Feb 04 Javascript
js 数组去重的四种实用方法
Sep 09 Javascript
JS动态显示表格上下frame的方法
Mar 31 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 Javascript
解决layer弹出层中表单不起作用的问题
Sep 09 Javascript
vue实现Input输入框模糊查询方法
Jan 29 Javascript
vue中使用极验验证码的方法(附demo)
Dec 04 Javascript
JavaScript中的类型检查
Feb 03 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读取RSS feed的代码
2008/08/01 PHP
php二维数组排序方法(array_multisort usort)
2013/12/25 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
JS模拟多线程
2007/02/07 Javascript
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
Vue中实现回车键切换焦点的方法
2020/02/19 Javascript
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python PyTorch预训练示例
2018/02/11 Python
python 把列表转化为字符串的方法
2018/10/23 Python
简单介绍一下pyinstaller打包以及安全性的实现
2020/06/02 Python
美国著名童装品牌:OshKosh B’gosh
2016/08/05 全球购物
Perfume’s Club法国站:购买香水和化妆品
2019/05/02 全球购物
意大利折扣和优惠券网站:Groupalia
2019/10/09 全球购物
自学考试自我鉴定范文
2013/09/26 职场文书
高中自我鉴定范文
2013/11/03 职场文书
家长给孩子的评语
2014/01/30 职场文书
大学生村官演讲稿
2014/04/25 职场文书
中学学校门卫岗位职责
2014/08/15 职场文书
委托公证书样本
2015/01/23 职场文书
教师节晚会主持词
2015/06/30 职场文书
音乐研修感悟
2015/11/18 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书
解读Vue组件注册方式
2021/05/15 Vue.js
手把手教你从零开始react+antd搭建项目
2021/06/03 Javascript
python接口测试返回数据为字典取值方式
2022/02/12 Python
mysql数据库实现设置字段长度
2022/06/10 MySQL
Redis实现短信验证码登录的示例代码
2022/06/14 Redis