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学习笔记之jQuery.fn.init()的参数分析
Jun 09 Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 Javascript
js实现div层缓慢收缩与展开的方法
May 11 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
JS实现星星评分功能实例代码(两种方法)
Jun 09 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
Oct 05 Javascript
Google 爬虫如何抓取 JavaScript 的内容
Apr 07 Javascript
JS实现异步上传压缩图片
Apr 22 Javascript
详解Angular 开发环境搭建
Jun 22 Javascript
vue 的keep-alive缓存功能的实现
Mar 22 Javascript
微信小程序template模板与component组件的区别和使用详解
May 22 Javascript
jQuery实现每日秒杀商品倒计时功能
Sep 06 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初学者头疼十四条问题大总结
2008/11/12 PHP
php中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
PHP中IP地址与整型数字互相转换详解
2014/08/20 PHP
调试PHP程序的多种方法介绍
2014/11/06 PHP
php一维二维数组键排序方法实例总结
2014/11/13 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
jQuery 联动日历实现代码
2012/05/31 Javascript
js实现按Ctrl+Enter发送效果
2014/09/18 Javascript
使用node.js 制作网站前台后台
2014/11/13 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
Jquery常用的方法汇总
2015/09/01 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
2016/01/19 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
Vue 打包体积优化方案小结
2020/05/20 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
django中模板的html自动转意方法
2018/05/27 Python
Python csv文件记录流程代码解析
2020/07/16 Python
python中return不返回值的问题解析
2020/07/22 Python
详解解决jupyter不能使用pytorch的问题
2021/02/18 Python
html5触摸事件判断滑动方向的实现
2018/06/05 HTML / CSS
德国、奥地利和瑞士最大的旅行和度假门户网站:HolidayCheck
2019/11/14 全球购物
P/Invoke是什么
2015/07/31 面试题
中文系师范生自荐信
2013/10/01 职场文书
结构工程研究生求职信
2013/10/13 职场文书
名人演讲稿范文
2013/12/28 职场文书
秘书行业自我鉴定范文
2013/12/30 职场文书
教师业务培训方案
2014/05/01 职场文书
文明礼仪伴我行演讲稿
2014/05/12 职场文书
项目经理任命书内容
2014/06/06 职场文书
入党积极分子党支部意见
2015/06/02 职场文书
python非标准时间的转换
2021/07/25 Python