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 字符串连接性能优化
Dec 20 Javascript
如何让页面加载完成后执行js
Jun 26 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
Apr 20 Javascript
javascript同步服务器时间和同步倒计时小技巧
Sep 24 Javascript
JQuery日期插件datepicker的使用方法
Mar 03 Javascript
vue.js入门教程之绑定class和style样式
Sep 02 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
详解react-router4 异步加载路由两种方法
Sep 12 Javascript
微信公众号生成新浪短网址的实现(快速生成)
Aug 18 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
Jul 20 Javascript
JS获取当前时间戳方法解析
Aug 29 Javascript
浅析JavaScript 函数柯里化
Sep 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
德生PL450的电路分析和低放电路的改进办法
2021/03/02 无线电
php xfocus防注入资料
2008/04/27 PHP
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
php 读取文件夹下所有图片、文件的实例
2018/10/17 PHP
js函数名与form表单元素同名冲突的问题
2014/03/07 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
jQuery通过deferred对象管理ajax异步
2016/05/20 Javascript
浅谈angular2路由预加载策略
2017/10/04 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
webpack4 css打包压缩问题的解决
2018/05/18 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
element-ui的回调函数Events的用法详解
2018/10/16 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
2019/04/15 Javascript
vue与django集成打包的实现方法
2019/11/11 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
Python基于列表模拟堆栈和队列功能示例
2018/01/05 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例
2020/02/25 Python
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2020/03/25 Python
keras输出预测值和真实值方式
2020/06/27 Python
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
社会保险接收函
2014/01/12 职场文书
《音乐之都维也纳》教学反思
2014/04/16 职场文书
法人代表证明书格式
2014/10/01 职场文书
化工见习报告范文
2014/10/31 职场文书
优秀班组申报材料
2014/12/25 职场文书
小升初自荐信怎么写
2015/03/26 职场文书
2015年学校减负工作总结
2015/05/19 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python