zoukankan      html  css  js  c++  java
  • [js高手之路] javascript面向对象写法与应用

    一、什么是对象?

    对象是n个属性和方法组成的集合,如js内置的document, Date, Regexp, Math等等

    document就是有很多的属性和方法, 如:getElementById, getElementsByTagName等等这些就是document对象支持的方法,那么我们常见的onclick, onmouseover,onmouseout等等就是document支持的属性

    二、javascript创建自定义对象,常用的有两种方式:

    上面是js内置的对象,如果我们需要自己创建对象,可以使用下面2种方式【构造函数方式与字面量方式】:

    1, var obj  = new Object()                    构造函数方式

    2, var obj = {}                                      字面量方式,其实就是一个json

    三、为对象添加属性和方法

    1 var obj = new Object();
    2 obj.userName = 'ghostwu';
    3 obj.age = 22;
    4 obj.sex = 'man';
    5 obj.showUserName = function(){
    6     alert( obj.userName );
    7 }
    8 obj.showUserName();

    此处创建了一个obj对象, 添加了3个属性: userName, age, sex,一个方法: showUserName

    访问属性和方法:

    对象.属性名称

    对象.方法名称()

    另一种形式创建对象

    1 var obj = {};
    2 obj.userName = 'ghostwu';
    3 obj.age = 22;
    4 obj.sex = 'man';
    5 obj.showUserName = function(){
    6     return this.userName + '---->' + this.age  + '---->' + this.sex;
    7 }
    8 alert( obj.showUserName() );

    先创建一个空的json,然后再为这个空的json对象添加属性和方法,上例方法中使用了一个关键词this, 关于this的指向问题,可以参考我的这篇文章[js高手之路]this知多少

    也可以直接在创建json的时候,添加属性和方法

    1 var obj = {
    2     userName  : 'ghostwu',
    3     age  :22,
    4     sex  :'man',
    5     showInfo : function(){
    6         return this.userName + '---->' + this.age + '--->' + this.sex;
    7     }
    8 };
    9 alert( obj.showInfo() );

    四,用面向对象的写法,封装一个加、减法.

    方式一:

    1 var obj = new Object();
    2 obj.add = function( a, b ){
    3     return a + b;
    4 };
    5 obj.sbb = function( a, b ){
    6     return a - b;
    7 }
    8 alert( obj.add( 10, 20 ) );
    9 alert( obj.sbb( 10, 20 ) );

    方式二:

    1 var obj = {};
    2 obj.add = function( a, b ){
    3     return a + b;
    4 }
    5 obj.sbb = function( a, b ){
    6     return a - b;
    7 }
    8 alert( obj.add( 10, 20 ) );
    9 alert( obj.sbb( 10, 20 ) );

    方式三:

     1 var obj = {
     2     add : function( a, b ){
     3         return a + b;
     4     },
     5     sbb : function( a, b ){
     6         return a - b;
     7     }
     8 };
     9 alert( obj.add( 10, 20 ) );
    10 alert( obj.sbb( 10, 20 ) );

    更强的四则运算封装,参考我的这篇文章:[js高手之路]面向对象+设计模式+继承一步步改造简单的四则运算

    五、用面向对象的写法,封装一个素数对象

     1 var Prime = {
     2     aPrime : [],
     3     isPrime : function( n ){
     4         if ( n < 2 ) {
     5             return false;
     6         }else {
     7             var flag = true;
     8             for( var i = 2; i < n; i++ ){
     9                 if( n % i == 0 ) {
    10                     flag = false;
    11                     break;
    12                 }
    13             }
    14             return flag;
    15         }
    16     },
    17     getPrime : function( start, end ){
    18         for( var i = start; i <= end; i++ ){
    19             if( this.isPrime( i ) ) {
    20                 this.aPrime.push( i );
    21             }
    22         }
    23         return this.aPrime;
    24     },
    25     count : function(){
    26         return this.aPrime.length;
    27     }
    28 };
    29 alert( Prime.isPrime( 11 ) );
    30 alert( Prime.getPrime( 1, 100  ) );
    31 alert( Prime.count() );

    这里我用的是json方式,你可以试试用构造函数方式改写

    六、面向对象的写法,封装一个隔行变色的效果

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     7     <title>Document</title>
     8     <style>
     9         div {
    10             margin: 10px;
    11             padding: 10px;
    12         }
    13         .even-color {
    14             background:#ccc;
    15         }
    16         .odd-color {
    17             background: #eee;
    18         }
    19         .active{
    20             background:yellow;
    21         }
    22     </style>
    23     <script>
    24         var Bg = {
    25             aDiv : [],
    26             oldColor : null,
    27             init : function(){
    28                 this.aDiv = document.querySelectorAll( "div" );
    29             },
    30             setBgColor : function(){
    31                 for( var i = 0 ; i < this.aDiv.length; i++ ){
    32                     if( i % 2 == 0 ) {
    33                         this.aDiv[i].className = 'even-color';
    34                     }else {
    35                         this.aDiv[i].className = 'odd-color';
    36                     }
    37                 }
    38             },
    39             hover : function(){
    40                 var that = this;
    41                 for( var i = 0 ; i < this.aDiv.length; i++ ){
    42                     this.aDiv[i].onmouseover = function(){
    43                         that.oldColor = this.className;
    44                         this.className = 'active';
    45                     }
    46                     this.aDiv[i].onmouseout = function(){
    47                         this.className = that.oldColor;
    48                     }
    49                 }
    50             }
    51         }
    52         window.onload = function(){
    53             Bg.init();
    54             Bg.setBgColor();
    55             Bg.hover();
    56         }
    57     </script>
    58 </head>
    59 <body>
    60    <div></div>
    61    <div></div>
    62    <div></div>
    63    <div></div>
    64    <div></div>
    65    <div></div>
    66    <div></div>
    67    <div></div>
    68    <div></div>
    69    <div></div> 
    70 </body>
    71 </html>

    我们可以在此例的基础上,稍加改造,让对象支持像jquery一样的链式调用,只需要在3个方法中, 返回当前对象(this)即可

     1 var Bg = {
     2     aDiv : [],
     3     oldColor : null,
     4     init : function(){
     5         this.aDiv = document.querySelectorAll( "div" );
     6         return this;
     7     },
     8     setBgColor : function(){
     9         for( var i = 0 ; i < this.aDiv.length; i++ ){
    10             if( i % 2 == 0 ) {
    11                 this.aDiv[i].className = 'even-color';
    12             }else {
    13                 this.aDiv[i].className = 'odd-color';
    14             }
    15         }
    16         return this;
    17     },
    18     hover : function(){
    19         var that = this;
    20         for( var i = 0 ; i < this.aDiv.length; i++ ){
    21             this.aDiv[i].onmouseover = function(){
    22                 that.oldColor = this.className;
    23                 this.className = 'active';
    24             }
    25             this.aDiv[i].onmouseout = function(){
    26                 this.className = that.oldColor;
    27             }
    28         }
    29     }
    30 }
    31 window.onload = function(){
    32     Bg.init().setBgColor().hover();
    33 }
  • 相关阅读:
    更新内核遇到 requested datatype primary not available
    在tmux缓冲区中搜索
    逻辑卷lvm消失问题.
    linux中的常用的proxy 代理方式
    windows下powershell的包管理工具
    一次docker镜像的迁移
    MAC OS 10.15 挂载ntfs文件系统并设置自动挂载RW模式.
    在linux中设置优先使用ipv4,而不是ipv6
    [搬家]新域名 akagi201.org
    基于Three.js的全景---photo-sphere-viewer
  • 原文地址:https://www.cnblogs.com/ghostwu/p/7637384.html
Copyright © 2011-2022 走看看