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实现的一个导航滚动效果具体代码
May 27 Javascript
jquery中的on方法使用介绍
Dec 29 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
May 09 Javascript
JQuery查找DOM节点的方法
Jun 11 Javascript
javascript实现显示和隐藏div方法汇总
Aug 14 Javascript
js实现select二级联动下拉菜单
Apr 17 Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 Javascript
详解ES6中的三种异步解决方案
Jun 28 Javascript
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
js实现上下左右键盘控制div移动
Jan 16 Javascript
Python版实现微信公众号扫码登陆
May 28 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.ini中文版(1)
2006/10/09 PHP
dede全站URL静态化改造[070414更正]
2007/04/17 PHP
在PHP里得到前天和昨天的日期的代码
2007/08/16 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
10款非常有用的 Ajax 插件分享
2012/03/14 Javascript
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
window resize和scroll事件的基本优化思路
2014/04/29 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
利用jQuery和CSS将背景图片拉伸
2015/10/16 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
Vue2几种常见开局方式详解
2017/09/09 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
[42:11]TNC vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python实现模拟时钟代码推荐
2015/11/08 Python
Python按行读取文件的简单实现方法
2016/06/22 Python
学生信息管理系统python版
2018/10/17 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
Python使用socketServer包搭建简易服务器过程详解
2020/06/12 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
大学生实习证明范本
2014/01/15 职场文书
什么样的创业计划书可行性高?
2014/02/01 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
2014年居委会工作总结
2014/12/09 职场文书
SpringBoot集成Redis的思路详解
2021/10/16 Redis