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 相关文章推荐
清除网页历史记录,屏蔽后退按钮!
Dec 22 Javascript
浅谈javascript中return语句
Jul 15 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
Jul 27 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
Nov 18 Javascript
JavaScript实现无穷滚动加载数据
May 06 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
Jul 31 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
Redux实现组合计数器的示例代码
Jul 04 Javascript
Vue 样式绑定的实现方法
Jan 15 Javascript
vue中datepicker的使用教程实例代码详解
Jul 08 Javascript
小程序实现左滑删除的效果的实例代码
Oct 19 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实现JS中escape与unescape的方法
2016/07/11 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
PHP通过调用新浪API生成t.cn格式短网址链接的方法详解
2019/02/20 PHP
ejs v9 javascript模板系统
2012/03/21 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
Bootstrap基本布局实现方法详解
2016/11/25 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
详解JS模块导入导出
2017/12/20 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
vue实现的请求服务器端API接口示例
2019/05/25 Javascript
JointJS JavaScript流程图绘制框架解析
2019/08/15 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
全面了解Python环境配置及项目建立
2016/06/30 Python
Python的collections模块中的OrderedDict有序字典
2016/07/07 Python
python+matplotlib绘制简单的海豚(顶点和节点的操作)
2018/01/02 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
python 实现rolling和apply函数的向下取值操作
2020/06/08 Python
详解python百行有效代码实现汉诺塔小游戏(简约版)
2020/10/30 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
毕业生动漫设计求职信
2013/10/11 职场文书
初入社会应届生求职信
2013/11/18 职场文书
《珍珠泉》教学反思
2014/02/20 职场文书
五一劳动节活动记录
2014/03/23 职场文书
3的组成教学反思
2014/04/30 职场文书
会计系毕业生求职信
2014/05/28 职场文书
安全生产一岗双责责任书
2014/07/28 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
市语委办2016年第十九届“推普周”活动总结
2016/04/05 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python
vue 把二维或多维数组转一维数组
2022/04/24 Vue.js
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang