首页 > 代码库 > Javascript基础--成员函数(六)

Javascript基础--成员函数(六)

成员函数:也叫方法

1.常用方法

比如:我们希望对象不但有属性,还希望他有行为。(行为在程序中要靠函数来体现)
(1) 添加speak函数,输出我是一个好人
(2) 添加jisuan函数,可以计算从1+..+1000的结果
(3) 修改jisuan函数,该方法可以接收一个数n,计算从1+..+n的结果
(4) 添加add成员函数,可以计算两个数的和

 

 1 function Person(name,age){
 2      //这个就是使用传入的实际参数,去初始化属性。
 3      this.name = name;
 4      this.age = age
 5      //输出自己的名字,这里 this.show 就是一个公开的函数,函数名是show
 6      this.show = function(){
 7          document.writeln("名字=" + this.name);
 8      }
 9  
10      //添加jisuan函数,可以计算从1+..+1000的结果
11      this.jisuan = function(){
12         var res = 0;
13         for(var i=0;i<1000;i++)
14         {
15              res+=i;
16          }
17          return res;
18       }
19 
20       //修改jisuan函数,该方法可以接收一个数n,计算从1+..+n的结果
21       this.jisuans = function(n){
22         var res = 0;
23         for(var i=0;i<=n;i++)
24         {
25              res+=i;
26          }
27          return res;
28       }     
29   }
30 
31   var p1 = new Person("宋江",90);
32   p1.show();
33   var p2 = new Person("林冲",72);
34   p2.show();
35   document.writeln("<br/> res=" + p1.jisuan());
36   document.writeln("<br/> res=" + p1.jisuans(100));
37  

 

2.给对象添加方法还有其它三种方式:
  2.1 方式一
  function 类名()
  {
  this.属性;
  }

  var 对象名 = new 类名();
  function 函数名(){
  //执行
  }

  对象名.属性名 = 函数名;//这样就相当于把函数赋给 对象名.属性名,此时这个属性 对象
  名.属性名就表示一个函数。

  对象名.属性名();

  具体案例:

      

 function Person(){
   this.name = "abc";
   this.age =900;  
 }
 function show1(){
    window.alert("hello" + this.name);
 }

 //创建一个p1对象
 var p1 = new Person();
 //把show1函数,给p1.abc
 p1.abc = show1; //如果是这样写:p1.abc = show1(),会把show1()的计算结果返回给p1.abc,当前要调用show1(),则返回undefine给p1.abc
 p1.abc();//调用

注意:
 window.alert(p1.abc); //会输出什么
 window.alert(show1)  //会输出什么

 

p1.abc和show1 输出的都是上图show1的构造函数

 

  2.2 方式二
  对象名.属性名 = function(参数列表){
    //代码
  };
  调用
  对象名.属性名(实际参数);

  具体案例:

  

1  function Person(){
2    this.name = "abc";
3    this.age = 900;
4  }
5  var p1 = new Person();
6  p1.abc = function show1(){
7     window.alert("hello" + this.name);
8  };
9  p1.abc();

 

  2.3 方式三:
  前面的几种方法有一个问题,那就每个对象独占函数代码,这样如果对象很多,则会影响效率
  ,js的设计者,给我们提供另一个方法 原型法:这样多个对象可以共享函数代码:

     

 1    function Dog(){
 2    }
 3    //使用prototype[类]去绑定一个函数给shout
 4    Dog.prototype.shout = function(){
 5       window.alert(‘小狗‘);
 6    }
 7    var dog1 = new Dog();
 8    dog1.shout();
 9    var dog2 = new Dog();
10    dog2.shout(); //这里ok

  对代码的原理说明

  

   

   //判断dog1和dog2的方法是否调用同一个内存地址的方法
    window.alert(dog1.shout == dog2.shout);

 

  

  =号的作用
  (1) 当 == 的两边都是字符串,则比较内容是否相等
  (2) 当 == 的两边都是数字,则比较数的大小是否相等
  (3) 当 == 是对象 或者是 对象函数,则比较地址是否相等

    

  2.4 案例分析
  分析能输出什么?
  案例一:

 1 function Person(){
 2      this.name = "abc1";
 3      this.age = 900;
 4  }
 5 
 6  function show1(){
 7     window.alert("hello" + this.name); //这里的this 是表示window 对象,没有给window.name 赋值,输出的时候只输出hello。
 8  }
 9  var p1 =new Person();
10  p1.abc = show1;
11  show1();

     

      案例二:

      

 function Person(){
   this.name = "abc1";
   this.age = 900;
 }

 var name = "北京"; // 这句话等同于window.name = "北京"function show1(){
    window.alert("hello" + this.name);  //这里的this 是表示window 对象
 }
 var p1 = new Person();
 p1.abc = show1;
 window.show1();


//下面跟案例二没有关系
 function Person(){
   this.name ="abc";
   this.age =900;
   this.abc = function(v1,v2){
      window.alert(this.name + " " + this.age +" "+v1+" "+v2);
   }
 }
 var p1 = new Person();
 p1.abc();
 p1.abc("北京","天津");
 var p2 = new Person();
 p2.abc();
 p2.abc("南京","东京");

 
 function Person(){
  this.name = "abc";
  this.age = 900;
  this.abc = function(v1,v2){
    window.alert(this.name + " " + this.age +" " +v1+" " +v2);
   }
 }

  var p1 = new Person();
  p1.name = "中国"; //动态添加一个属性
  p1.abc("北京","天津");
  var p2 = new Person();
  p2.abc("南京","东京");

每次new一个类的实例后,都会创建两个公共属性name,age和一个公共方法abc(),而不是共享

 1 function Dog(){
 2   }
 3 
 4   var dog1 = new Dog();
 5   //动态绑定一个函数给shout属性
 6   dog1.shout = function(){
 7     window.alert(‘小狗‘);
 8   }
 9 
10    dog1.shout();
11 
12    var dog2 = new Dog();
1314    dog2.shout();//这里报错
15 
16    //希望所有的对象,共享某个函数

解决方案:

function Dog(){
   
   }
   //使用prototype[类]去绑定一个函数给shout
   Dog.prototype.shout = function(){
      window.alert(‘小狗‘);
   }
   var dog1 = new Dog();
   dog1.shout();
   var dog2 = new Dog();
   dog2.shout(); //这里ok
  

 

   //判断dog1和dog2的方法是否调用同一个内存地址的方法
   window.alert(dog1.shout == dog2.shout);  

   //扩展

   var dog3 = new Dog();
   var dog4 = new Dog();
   var dog5 = dog4;
   window.alert("dog3==dog4" +(dog3==dog4));  //判断对象是否为同一个对象
   window.alert("dog5==dog4" +(dog4==dog5));  //判断对象是否为同一个对象

 

 

3、Object 类

  3.1 创建Person实例

      

/*function Person(){

   }
   var p1 = new Person();
   p1.name ="sp";*/

   //初步体验Object类,通过Object直接创建对象。
   var p1 = new Object();
   p1.name="sp";
   window.alert(p1.constructor);
  

var i1= new Number(10); window.alert(i1.constructor);
var i2 =10; window.alert(i2.constructor);
var i=new Number(10); Number.prototype.add = function(a){ return this + a; } window.alert(i.add(10).add(30)); var b = 90; window.alert(b.add(40)); var arr = new Array(3); arr[0] = "George"; arr[1] = "John"; arr[2] = "Thomas"; for(var i=0;i<arr.length;i++){ document.writeln(arr[i] +"&nbsp;"); } //使用Array提供的方法,颠倒数据。 arr.reverse(); document.writeln("<br/>"); for(var i=0;i<arr.length;i++){ document.writeln(arr[i] +"&nbsp;"); }

  

  

  3.2 加深对类和对象的认识
  如何给类添加方法(如何给某类型的所有对象添加方法) 

   /*
     请思考给js的Array对象扩展一个find(val)方法,
     当一个Array对象调用该方法的时候,如果能找到val则返回其下标,否则返回-1
   */

    var arr = new Array(3);
    arr[0] = "George";
    arr[1] = "John";    
    arr[2] = "Thomas";
    //现在我们一起看看如何给所有Array对象添加一个方法find(val);
     Array.prototype.find = function(val){
         //遍历数组 this
         for(var i=0;i<this.length;i++){
             if(val == this[i]{
                return i;
             }
          }
        return -1;
     }

     document.writeln("John 下标 =" +arr.find("John"));

 

  3.3 成员函数-细节
    3.3.1 成员函数的参数可以是多个
    比如:function 函数名(参数1...){}
    3.3.2 成员函数可以有返回值,也可以没有,但是有的话,最大只能有一个
    3.3.3 js中不支持函数的重载,具体案例如下:

 

 1     function test(a,b,c){
 2         window.alert("hello");
 3       }
 4 
 5       function test (a){
 6         window.alert(a);
 7       }
 8       
         //三个同名的函数,后面的函数会覆盖前面的函数,js中没有重载的概念,只会执行下面标红的函数
 9       function test(a,b){
10         window.alert(a + "" + b);
11       }
12       //test(23);
13       window.test(3,"hello");
         

14 
15       //结论:js在调用一个函数的时候,是根据函数名来调用。如果有个多个函数名相同,则认最后那个函数。
16       
17       function abc(){
18        var s=0;
19         for(var i=0;i<arguments.length;i++){
20           s+=arguments[i];     //arguments[i]的下标是从1开始的,而不是0
21         }
22         return s;
23        }
24        window.alert(abc(1,2));
25        window.alert(abc(7,8,9));