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 CSS修改学习第二章 样式
Feb 19 Javascript
JavaScript中的方法调用详细介绍
Dec 30 Javascript
JavaScript中的Primitive对象封装介绍
Dec 31 Javascript
JavaScript中的parse()方法使用简介
Jun 12 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 Javascript
在使用JSON格式处理数据时应该注意的问题小结
May 20 Javascript
Node.js 基础教程之全局对象
Aug 06 Javascript
简述vue状态管理模式之vuex
Aug 29 Javascript
Vue表单输入绑定的示例代码
Nov 01 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
vue中typescript装饰器的使用方法超实用教程
Jun 17 Javascript
Vue作用域插槽实现方法及作用详解
Jul 08 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连接Oracle数据库
2006/10/09 PHP
PHP面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
PHP取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
PHP中文编码小技巧
2014/12/25 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
用js判断浏览器是否是IE的比较好的办法
2007/05/08 Javascript
用jscript启动sqlserver
2007/06/21 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
js 处理数组重复元素示例代码
2013/12/27 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
node.js中的fs.readlinkSync方法使用说明
2014/12/17 Javascript
jQuery中removeProp()方法用法实例
2015/01/05 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
JS判断是否手机或pad访问实现方法
2016/12/09 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
2019/05/24 Javascript
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
JS实现烟花爆炸效果
2020/03/10 Javascript
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
Python3.2中的字符串函数学习总结
2015/04/23 Python
Python 实现简单的电话本功能
2015/08/09 Python
TensorFlow搭建神经网络最佳实践
2018/03/09 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
python进阶之自定义可迭代的类
2019/08/20 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
医科大学毕业生自荐信
2014/02/03 职场文书
初中生期末评语大全
2014/04/24 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
求职简历自我评价范文
2015/03/10 职场文书
担保书怎么写 ?
2019/04/22 职场文书
Java版 单机五子棋
2022/05/04 Java/Android
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript