＊Javascript普通関数と構造関数の違い&JS----構造関数とプロトタイプの違い

9401 ワード

javascript

グウグウグウグウグウグウグウグウグウグウグウグウグウグウグウグウグウグウ
一般関数とコンストラクタの違い
命名規則では、コンストラクションは普通頭文字で大文字で、普通関数は小さいラクダのピーク式の命名法に従っています.
関数の呼び出し時:
function fn(){}
コンストラクタ:1.new fn() 2.コンストラクタ内部に新しいオブジェクト、すなわちfの例を作成します. 3.関数内部のthisは、新規作成されたfの例を指します. 4.標準の戻り値はfの例です.
一般関数:1.fn() 2.関数を呼び出す内部では、新しいオブジェクトは作成されません. 3.関数内部のthisは呼び出し関数のオブジェクトを指します. 4.戻り値は、return文で決定されます.

//    
function Egperson (name,age) {
    this.name = name;
    this.age = age;
    this.sayName = function () {
        alert(this.name);
     }
}
var person = new Egperson('mike','18'); //this-->person
person.sayName();  //'mike'


//    
function egPerson (name,age) {
    this.name = name;
    this.age = age;
    this.sayName = function () {
        alert(this.name);
     }
}
egPerson('alice','23'); //this-->window
window.sayName();  //'alice'

見て取れる:
1)コンストラクタ内部では、一例を作成します.普通の関数を呼び出した場合、新しいオブジェクトは作成されません.
2)コンストラクタ内部のthis指向は新しく作成されたpersonの例であり、一般関数内部のthisはコール関数のオブジェクトを指している(オブジェクトコールがない場合、デフォルトはwindow).
コンストラクタの戻り値:
 デフォルトの戻り値があり、新規作成されたオブジェクト(例)があります. 戻り値を手動で追加した場合(return文):
 1.戻り値は基本データタイプです.本当の戻り値ですか?それとも新しく作成されたオブジェクトですか? 2.戻り値は複雑なデータタイプ(オブジェクト)です.本当の戻り値はこのオブジェクトです.
よくある面接問題を見ます.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 functionfoo() { varf2 =newfoo2(); console.log(f2); //{a: 3} console.log(this);//window returntrue; } functionfoo2() { console.log(this);//foo2 foo2 // this.age = 30; return{a: 3}; } varf1 = foo(); console.log(f1);// trueググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググググu _
JS---- とプロトタイプのい
http://blog.csdn.net/damys/article/details/47006405
コンストラクタのはいやすいですが、メモリのがあります.
プロトタイプでりてられたはすべてのオブジェクトがします.プロトタイプでりてられたはしています.
すべてのオブジェクトがじをうことをむなら、プロトタイプをってをしたほうがいいです.メモリをします.
:
//---- モードは、Catオブジェクトにの「type」をし、もうつの eatをします.モデルのCatはのようになります.
[javascript]view plin
copy
print
 &ボルトspant>ボルトspant>ボルトligt;
<ligt;lt;spant>lt;span class=keyword>function<spant>lt;spant; Cat(name) カラー { 
<li class="alt"<spangt; 
<ligt;spant; 
<li class="alt"<spangt; 
<ligt;spant; 
<li class="alt"<spangt; alert(
<ligt;spant; }; <spangt;
<li class="alt"<spangt; } <spangt;
<ligt;spant; <spangt;
<li class="alt"<spangt; <spangt;
<ligt;<spant
<li class="alt"<spangt;new</spangt; Cat(</spangt;“ ”</spangt;<spant; </spangt;
<ligt;<spantvar</spangt; cat 2 = <spangt;new</spangt; Cat(</spangt; </spangt;<spant; </spangt;
<li class="alt"<spangt;alert(cat 1.type); 
<ligt;<spangt;cat 1.eat(); 
<li class="alt"<spangt; <spangt;
<ligt;spant; <spangt;
<li class="alt"<spangt;alert(cat 1.eat) == cat 2.eat) 
<ligt;spant;

 
   
function Cat(name, color) {
    this.name = name;
    this.color = color;
    this.type = "    ";
    this.eat = function () {
        alert("   ");
    };
    }


//    ：
var cat1 = new Cat("  ", "  ");
var cat2 = new Cat("  ", "  ");
alert(cat1.type);         //     
cat1.eat();       //     


alert(cat1.eat == cat2.eat); //false
  
  
 那就是对于每一个实例对象，type属性和eat()方法都是一模一样的内容，每一次生成一个实例，都必须为重复的内容，多占用一些内存。这样既不环保，也缺乏效率。
 　　

 
   
  //----Prototype模式 
 Javascript规定，每一个构造函数都有一个prototype属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。
 这意味着，我们可以把那些不变的属性和方法，直接定义在prototype对象上。

 
   
    
     
     [javascript] view plain 
      copy 
      print ? 
     
    
    
      </span></span></li> 
    <li><span><span class="keyword">function</span><span> Cat(name, color) {  </span></span></li> 
    <li class="alt"><span>    <span class="keyword">this</span><span>.name = name;  </span></span></li> 
    <li><span>    <span class="keyword">this</span><span>.color = color;  </span></span></li> 
    <li class="alt"><span>    }  </span></li> 
    <li><span>  </span></li> 
    <li class="alt"><span>  </span></li> 
    <li><span>Cat.prototype.type = <span class="string">"猫科动物"</span><span>;  </span></span></li> 
    <li class="alt"><span>Cat.prototype.eat = <span class="keyword">function</span><span> () {  </span></span></li> 
    <li><span>    alert(<span class="string">"吃老鼠"</span><span>)  </span></span></li> 
    <li class="alt"><span>};  </span></li> 
    <li><span>  </span></li> 
    <li class="alt"><span>  </span></li> 
    <li><span><span class="comment">//生成实例。</span><span>  </span></span></li> 
    <li class="alt"><span><span class="keyword">var</span><span> cat1 = </span><span class="keyword">new</span><span> Cat(</span><span class="string">"大毛"</span><span>, </span><span class="string">"黄色"</span><span>);  </span></span></li> 
    <li><span><span class="keyword">var</span><span> cat2 = </span><span class="keyword">new</span><span> Cat(</span><span class="string">"二毛"</span><span>, </span><span class="string">"黑色"</span><span>);  </span></span></li> 
    <li class="alt"><span>alert(cat1.type); <span class="comment">// 猫科动物</span><span>  </span></span></li> 
    <li><span>cat1.eat();<span class="comment">// 吃老鼠</span><span>  </span></span></li> 
    <li class="alt"><span>  </span></li> 
    <li><span>  </span></li> 
    <li class="alt"><span>alert(cat1.eat == cat2.eat);<span class="comment">//trueF</span><span>  </span></span></li> 
    <li><span>   
    
     
    
   
   
function Cat(name, color) {
    this.name = name;
    this.color = color;
    }


Cat.prototype.type = "    ";
Cat.prototype.eat = function () {
    alert("   ")
};


//    。
var cat1 = new Cat("  ", "  ");
var cat2 = new Cat("  ", "  ");
alert(cat1.type); //     
cat1.eat();//    


alert(cat1.eat == cat2.eat);//trueF
  
  
 这时所有实例的type属性和eat()方法，其实都是一个内存地址，指向prototype对象，因此就提高了运行效率



                            
                                    MYESCLIPSEプロジェクトはWTCPプロジェクトに変更されました.