1. 程式人生 > >建立物件--建構函式

建立物件--建構函式

一、什麼是物件:鍵值對的集合{key:value}

JSON表示法,變數的直接量

var p={

  'name':'alvin',

  'age':19,

  'gender':'boy',

  'sayHello':function(){

    alert('hello world');

}

};

呼叫json的方法:

方法一:p.sayHello();

方法二:p['sayHello']();//加上引號,訪問的是屬性,不是變數

//使用json物件的方法有一個缺點:無法複用;優點:方便簡潔

二、結果複用問題,採用建構函式

var p=function(){                                                                                 建構函式中不需要return;

   this.name='alvin";//必須要this,表示當前物件                         為物件新增成員時使用:this.成員名=值

  this.age=19;

  this.gender="boy";

  this.sayHello=function(){

   alert("say hello");

   };

};

var p=new Person();

p.sayHello();

var p1=new Person();

console.log(p===p1);//結果:false,重新new出來的建構函式不相同

//這個建構函式缺點:構造出來的內容無法修改,所以要改成帶引數

三、帶引數的建構函式

1、函式引數呼叫

function getArea(w,h){

 return w*h/2;

}

//在引數中寫變數的好處是:A、相當於聲明瞭變數,B、呼叫時又一次賦值

var area=getArea(1,2);

alert(area);//結果為1

形參:就是形式引數                                         實參:實際引數

2、形參

var Person=function(newName,newAge,newGender){

  this.name=newName;

 this.age=newAge;

 this.gender=newGender;

 };

var myP=new Person('alvin',24,'boy');

alert(myP);

例子

var Student=function(mathG,chineseG,englishG){

 this.math=mathG;

 this.chinese=chineseG;

 this.english=englishG;

};

var p=new Student(70,80,99);

改良----》方法

var Student=function(myName,myScores){

   this.name=myName;

  this.scores=myScores; 

  this.sayHelo=function(){

   alert(this.name+this,scores.math+this.scores.chinese+this.cores.english);

};

var StudentTwo=new Student('alvin',{math:90,chinese:90,english:70});//Json格式

StudentTwo.sayHelo();

四、建構函式的劣勢
function Fn(name){
  this.name=name;
  this.sayHello=function(){
    alert("hello world");
    };
 }
var pp1=new Fn("alvin");
var pp2=new Fn("feng");

1、傳統建構函式的劣勢

(1)、假定所有成員都佔4個字元;(2)、建立一個物件需要8個字元;(3)、建立10個物件就需要80個字元

2、改良後建構函式的優點

(1)、採用prototype原形將同樣的方法進行共享;(2)、此時10個物件就只需要44個字元



*****重點********
在函式裡有一個屬性叫prototype:有該函式建立的物件會預設的連線到該屬性上

function Fn(){

 }
Fn.prototype.num=123;//共享的資料,減少佔用字元的方法

var f=new Fn();

//f.num=1;     當前物件

alert(f.num);

1、在訪問物件的某個屬性(方法)的時候,首先會在當前物件中查詢有沒有該屬性;
2、如果當前物件中沒有該屬性,就會在構造方法的定義規則中查詢該物件;
3、如果構造方法中也沒有,就會到與物件聯絡起來的建構函式的prototype屬性中找;

例子
function Fn(name){
  this.name=name;
  }
Fn.prototype.sayHello=function(){//對於共同的資料可以用prototype屬性放進裡面,因為(1)、物件會到與它聯絡的prototype中找資料,(2)、可以考慮將共享的資料放到裡面    
   alert('hello world');
  }
var pp1=new Fn('alvin');//當前物件無論建立多少個都只有一個sayHello副本,減少字元的佔用
var pp2=new Fn('feng');

console.log(pp1.sayHello===pp2.sayHello);//結果:true

注意:(1)、pp1.sayHello不能加()括號,加了()括號就等於呼叫sayHello方法,因為sayHello()沒有return值,所以結果都是undefine,相等
      (2)、不加()括號就等於比較兩的屬性。


五、物件的基本概念
1、物件中有一個  _proto_:通過呼叫可以發現物件的 _proto_與建立它的建構函式的prototype是同一個東西

function Fn(){}
var p=new Fn();
console.log(p._proto_===Fn.prototype);//結果:true,同一個東西

2、_proto_是非標準屬性

3、原型:
   (1)、Fn.prototype 是建構函式Fn的原型屬性   (2)、p.prototype  是物件p的原型物件

4、在訪問一個物件的屬性的時候,首先在當前物件中找,如果沒有在其原型物件中找(這個原型物件是創造構造它的函式的prototype屬性);


5、原型物件和原型屬性的區別:

  ***凡是函式就有屬性prototype:由某一個函式new出來的物件,會自動連線到該函式的Prototype
   舉例:
   function Fn1(){}
   function Fn2(){}
   var f1=new Fn(); //f1--》自動連線到Fn1.prototype
   var f2=new Fn();//f2-->自動連線到Fn2.prototype
 

   var o1=new Object();//o1-->Object.prototype
   var f=new Array(3);//f-->Array.prototype
   var d=new Date(0;//d-->Date.prototype;

(1)、連線到prototype有什麼用呢?   資源共享

答:屬性(屬性與方法),屬性和方法不加以區分
var p={
 name:"alvin",//屬性
 age:19,
 sayHello:function(){},//屬性裡面有function方法
};

(2)、在訪問一個物件的屬性的時候,首先在當前物件中找,如果沒有在其原型物件中找(這個原型物件是創造構造它的函式的prototype屬性);
(3)、原型物件:就是物件的建構函式的prototype屬性
(4)、原型物件與原型屬性   A、原型物件:new出來的物件,是根據物件討論的  B、站在建構函式的角度;兩者指的是同一個東西

(5)、_proto_和prototype有什麼區別?
       _proto_是站在物件的角度討論起原型物件
       prototype是站在建構函式的角度討論原型屬性,或建構函式建立的物件的原型物件




基礎:
(1)、isFinite(10/0);結果:false,判斷是否為無限的,false就是為有限的,true就是無限的
(2)、判斷數字
      var a='123';
      var b='abc';
      console.log(a-0);//123
      console.log(b*1);//NaN
 (3)、判斷NaN:
      1、isNaN;
      2、在js中有一個特性,NaN與自己不相等
      console.log(NaN==NaN);//結果為:false

 (4)、setTimeout:多少秒後執行一次
      setInterval:多少秒後執行,間隔該秒數再次執行,直到遇到clearInterval