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基础知识之数据类型
Aug 06 Javascript
关于JavaScript中string 的replace
Apr 12 Javascript
浅谈JavaScript中的String对象常用方法
Feb 25 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 Javascript
基于JavaScript实现动态添加删除表格的行
Feb 01 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
Aug 11 Javascript
浅谈Web页面向后台提交数据的方式和选择
Sep 23 Javascript
VUE实现表单元素双向绑定(总结)
Aug 08 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 Javascript
Vue-resource安装过程及使用方法解析
Jul 21 Javascript
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
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学习之 认清变量的作用范围
2010/01/26 PHP
PHP实现上传文件并存进数据库的方法
2015/07/16 PHP
PHP面向对象详解(三)
2015/12/07 PHP
PHP反射学习入门示例
2019/06/14 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
让checkbox不选中即将选中的checkbox不选中
2014/07/11 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
微信开发 微信授权详解
2016/10/21 Javascript
AngularJS模仿Form表单提交的实现代码
2016/12/08 Javascript
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
Vue.js实现列表清单的操作方法
2017/11/15 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
关于angularJs清除浏览器缓存的方法
2017/11/28 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
javascript实现评分功能
2020/06/24 Javascript
在vue中使用console.log无效的解决
2020/08/09 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
使用Python实现简单的服务器功能
2017/08/25 Python
python异步存储数据详解
2019/03/19 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
简单了解Python matplotlib线的属性
2019/06/29 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
Ooni英国官网:披萨烤箱
2020/05/31 全球购物
辞旧迎新演讲稿
2014/09/15 职场文书
向女朋友道歉的话
2015/01/20 职场文书
2015年药品销售工作总结范文
2015/05/25 职场文书
买卖合同纠纷代理词
2015/05/25 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
JavaScript控制台的更多功能
2021/04/28 Javascript
JAVA SpringMVC实现自定义拦截器
2022/03/16 Python