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

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

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

2024-07-02 01:53:25 226人阅读

成员函数：也叫方法

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));

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

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

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

看完仍有疑问？有类似问题直接问程序猿