JavaScript--對象+函數

時間 2019-12-11

原文原文鏈接

1. 複雜數據類型 Object
ECMAScript中的對象其實就是一組數據(屬性)和功能(方法)的集合。
    1) 建立Object實例：
  　　1.使用構造函數建立，new Object()
   　　　　var person = new Object();
  　　　　 person.name = "macth";
   　　　　person.age = 22;javascript

  　　2.使用對象字面量表示法
   　　　　不一樣的屬性之間用','分割，屬性名和屬性值之間用':'分割
  　　　　　　 var person = {
    　　　　　　　　name : "macth",
   　　　　　　　　 age : 22
   　　　　　　};
    2) 訪問對象屬性
  　　　1.點表示法，右側必須是以屬性名稱命名的簡單標識符
   　　　　person.name
  　　　2.中括號表示法，中括號中必須是一個計算結果爲字符串的表達式，能夠經過變量訪問屬性，若是屬性名中包含語法錯誤的字符，或者屬性名使用的是關鍵字或保留字，可使用中括號 person["first name"]
   　　　　var a = "name";
  　　　　 person[a]; //既person["name"]
  　　　　 person["first name"]

    3) 刪除屬性
  　　　delete只是斷開了屬性和宿主對象的聯繫，而不會操做屬性中的屬性，而且delete只會刪除自有屬性，不能刪除繼承屬性。在銷燬對象時，爲了防止內存泄露，遍歷對象中的屬性，依次刪除全部屬性。
  　　語法：delete 屬性訪問表達式
　　  例如：
  　　　　 delete stu.name //刪除學生對象中的name屬性
    4) 檢測屬性
　　 in 檢測某屬性是不是某對象的自有屬性或者是繼承屬性,是就返回true,不然返回false
  　　　　 "toString" in student
  　　hasOwnProperty()檢測給定的屬性是不是對象的自有屬性，對於繼承屬性將返回false
  　　　　 var o = {
    　　　　　　x:1
  　　　　 }
   　　　　o.hasOwnProperty("x"); //true, x 爲o的自有屬性
  　　　　 o.hasOwnProperty("y"); //false,o 中不存在屬性y
  　　　　 o.hasOwnProperty("toString"); //false,toString爲繼承屬性
  　　propertyIsEnumerable() 檢測給定的屬性是不是該對象的自有屬性，而且該屬性是可枚舉的一般由JS代碼建立的屬性都是可枚舉的，可是可使用特殊的方法改變可枚舉性。
  　　　　 student.propertyIsEnumerable("toString") //false 不可枚舉
    5) Object屬性及方法
       Object 類型所具備的任何屬性和方法也一樣存在於其餘對象中，任何對象繼承於Object對象
       Object中經常使用的方法：
   　　　　hasOwnProperty(propertyName);
   　　　　　　檢查給定的屬性名是不是對象的自有屬性，
  　　　　 toString();
   　　　　　　返回對象的字符串表示
  　　　　 valueOf();
   　　　　　　返回對象的字符串，數值，布爾值的表示。
   　　　　propertyIsEnumerable(propertyName);
    　　　　　　檢查給定的屬性在當前對象實例中是否存在
   　　　　constructor:
   　　　　　　保存用戶建立當前對象的函數
  　　　　 isPrototypeOf(object);
   　　　　　　檢查傳入的對象是不是原型
   　　　　toLocaleString();
   　　　　　　返回對象的字符串表示，該字符串與執行環境的地區對應
　6) 對象序列化
  　　對象序列化是指將對象的狀態轉換爲字符串，也能夠反序列化，將字符串還原爲對象函數，RegExp,Error對象，undefined值不能序列化和反序列化。
        　　JSON.stringify(obj)
   　將對象序列化爲Json字符串,只能序列化對象可枚舉的自有屬性。
  　　　　JSON.parse(jsonStr)
   　　反序列化java

2. 函數json

0)聲明提高：數組

　　函數聲明提高，全部的函數聲明會提高至當前的做用域頂部app

　　　　　　//函數聲明--->函數聲明會提高函數

　　　　　　function fnName(arg1,arg2){this

　　　　　　　　//function bodyprototype

　　　　　　} 對象

　　　　　　//函數表達式--->函數表達式並不會被提高排序

　　　　　　var fnName=function(){

　　　　　　　　//function body

　　　　　　};

　　變量聲明提高

　　　　alert("a" in window);

　　　　var a; ===>var a;

　　　　　　　　　　　　　　　　　　alert(""a" in window);

　　　　只有變量聲明被提高而變量初始化不會提高（即變量直接賦值時在執行階段建立）。

　　　　　　var a=1; ===>var a;

　　　　　　　　　　　　　　　a=1;

　　　　　　alert(a); //undefined

　　　　　　alert(b);//error

　　　　　　b=10;

　　　　　　var a=20;

　　　　當變量聲明並初始化，javascript會自動拆分變量聲明和變量初始化

　　　　爲何沒有提高變量初始化？

　　　　　　由於這樣會影響變量值在代碼執行期間致使不可預料的結果

　　必須知道和理解函數聲明會覆蓋變量聲明，但不會覆蓋變量初始化

　　　　function value(){

　　　　　　return 1;

　　　　}

　　　　var value;

　　　　alert(typeOf value); //function (typeOf返回一個表示類型的字符串)

　　　　//即便變量聲明出如今函數聲明以後，函數聲明也會得到更高的優先權

　　　　function value(){

　　　　　　return 1;

　　　　}

　　　　var value=1;

　　　　alert(typeOf value); //Number 變量初始化覆蓋了函數聲明

　　　　var a=1;　　　　　　　　　　　　　　　　var a;

　　　　function foo(){　　　　　　　　　　　　　function foo(){

　　　　　　a=10;　　　　　　　　　　　　　　　　　　function a(){}

　　　　　　function a(){}　　　　===>　　　　　　　　a=10;

　　　　}　　　　　　　　　　　　　　　　　　　　}

　　　　foo();　　　　　　　　　　　　　　　　　　a=1;

　　　　alert(a);　　　　　　　　　　　　　　　　　foo();

　　　　　　　　　　　　　　　　　　　　　　　　　alert(a); //1
1) 做爲值的函數
  　　因爲函數名自己就是變量，因此函數能夠當作值來使用（參數，返回值）。
  　　function callOther(fun,args){
   　　　　return fun(args);
  　　}
  　　function show(msg){
   　　　　alert(msg);
  　　}
  　　callOther(show,"哈哈"); //show爲參數
2) 做爲返回值的函數
        eg:多功能自定義排序函數
　　 function myCompare(pro){
   　　//函數將做爲返回值返回
   　　　　return function(obj1,obj2){
   　　　　　　 var val1 = obj1[pro];
    　　　　　　var val2 = obj2[pro];
    　　　　　　if(val1<val2){
    　　　　　　　　 return -1;
    　　　　　　}else if(val1>val2){
    　　　　　　　　 return 1;
    　　　　　　}else {
     　　　　　　　　return 0;
   　　　　　　 }
   　　　　}
　　 }
  　　var data = [
  　　 {
    　　　　name : "aaa",
    　　　　age :12
   　　},{
    　　　　name:"ccc",
    　　　　age : 8
   　　},{
    　　　　name :"bbb",
    　　　　age : 71
   　　}
  　　];
  　　console.log(data);
  　　data.sort(myCompare("age"));
  　　console.log(data);
3) 函數內部屬性
  1. arguments :是類數組對象，包含着傳入函數中參數，arguments對象還有一個callee的屬性，用來指向擁有這個arguments對象的函數
   　　//實現多個數值類型的相加
  　　var addAll = function(){
   　　console.log(arguments.callee == addAll);
   　　// arguments = [1,2,3,5];
   　　var total = 0;
   　　for(var key in arguments){
    　　　　//經過索引獲取值，key索引 0,1,2,3
    　　　　var value = arguments[key];
   　　　　 total +=value;
   　　}
  　　 return total;
  　}
  　　var result = addAll(1,2,3,5,3,4);
  　　console.log("結果爲："+result);
   例如：
   num的階乘，使用遞歸函數
   function factorial(num){
    if(num<=1){
     return 1;
    }else{
     //return num * factorial(num-1);
     return num * arguments.callee(num-1);
    }
   }
  2. this: 指向的是函數賴以執行的環境對象
    　　window.color = "window";
    　　var person = {
   　　　　color:"person"
   　　 };

   　　function add(a,b){
   　　　　 alert(a+b);
   　　}
   　　add(1,2);// this->window
  　　 =>
   　　add.call(window,1,2);
  　</script>

  　　apply ：參數（在其中運行函數的做用域，參數數組（Array,arguments））；
  　　call ：參數（在其中運行函數的做用域，參數列表）
        　　這兩個方法做用都是在特定的做用域中調用函數，實際上等於設置函數內部的this的值

  　　用法一：
  　　 function sum(m,n){
  　　　　  return m+n;
   　　}
   　　function call(m,n){
    　　　　//return sum.apply(this,arguments);
    　　　　return sum.call(this,m,n);
  　　 }
   　　alert(call(1,2));
  　　用法二：
           擴充函數賴以運行的做用域
    　　 window.color = "window";
     　　var person = {
   　　　　color:"person"
     　　};

     　　function sayColor(){
   　　　　alert(this.color);
    　　 }
     　　sayColor.call(this);
     　　sayColor.call(window);
     　　sayColor.call(person);

3. 基本數據類型，引用數據類型
　　基本數據類型的變量：
  　　　　能夠直接操做保存在變量中的實際的值
  　　　　參數傳遞的時候傳遞的是實際值
　　引用數據類型的變量：
  　　　　不能直接操做對象的內存空間，其實是在操做對象的引用。
  　　　　能夠爲引用類型變量天極愛屬性和方法，也能夠改變和刪除其屬性和方法
  　　　　參數傳遞的時候傳遞的是引用地址。
　　值傳遞
  　　　　值的拷貝
　　引用傳遞
　　　　引用地址的拷貝