js的函式和物件

RoOK1E發表於2018-08-13
JS函式物件

函式

- 函式也是一個物件，物件能做的函式都能做。
- 函式中可以儲存可執行的程式碼，並且在需要的時候進行呼叫。
- 使用typeof檢查函式時，會返回 function
function fun(){
  return 'function'
}
console.log(typeof fun);        // function

函式的建立

1.函式宣告

function函式名(形參1,形參2,...形參N){
函式體
}

function sum (num1,num2){
 return num1+num2
}

2.函式表示式

var 函式名=function(形參1,形參2,...形參N){
函式體
}

 var sum=function(num1,num2){
   return num1+num2
}

函式的呼叫

函式呼叫:函式物件+()

function fun(){
 console.log('我是一個function');
}

fun()   //我是一個function

函式的引數

形參（形式引數）

        - 定義函式時可以在函式定義數量不等的形參，多個形參之間使用,隔開
        - 定義形參就相當於在函式中宣告瞭對應的變數但是並不賦值
        - 形參會在函式呼叫的時候賦值

實參（實際引數）

        - 函式呼叫時，可以在()傳遞實參
        - 實參會賦值給對應的形參
        - js解析器不會檢查實參的型別和數量
        - 可以傳遞任意型別的實參（基本資料型別、物件、函式）
        - 可以傳遞任意數量的實參

返回值

    - 在函式中可以通過 return 來設定返回值
    - 語法：return 值;
    - 返回值將會作為函式的執行結果返回，可以定義一個變數來接收返回值
    - 如果return後不跟值，或者不寫return則相當於return undefined
    - return後的所有的程式碼都不會執行，return一執行函式立即結束
    - 任何型別的值都可以作為函式的返回值


function num(){
  console.log('這是一個函式')
  return 100;
}
console.log(fun())   //這是一個函式 
                     //100    
 - 函式的return語句的確允許不編寫在函式體的最後面
 - 一旦return語句不在函式體的最後面 - return語句之後的程式碼都不再執行
  function fn(){
        console.log('這是return語句之前...');
        return;
        console.log('這是return語句之後...');
    }

    console.log(fn());   // 這是return語句之前...
                         //undefined

作用域

作用域就是變數的作用範圍，一個變數在哪些範圍中可見

全域性作用域

        - 全域性作用域在頁面載入時建立，在頁面關閉時銷燬。
        - 直接在script標籤中編寫的內容，都在全域性作用域中
        - 在頁面中有一個全域性物件window，代表的是整個的瀏覽器視窗
            在全域性作用域中建立的變數都會作為window的屬性儲存
            在全域性作用域中建立的函式都會作為window的方法儲存
        - 在全域性作用域中建立的變數和函式都是全域性變數和函式，可以在頁面的任意位置訪問。
var a=10;
console.log(a);   //10

函式作用域（區域性作用域）

        - 函式作用域在函式呼叫時建立，在呼叫結束時銷燬。
        - 函式每執行一次就會建立一個新的函式作用域。
        - 在函式中使用var關鍵字宣告的變數是區域性變數，區域性變數只能在函式內部使用，外部無法訪問。
        - 如果不使用var關鍵字宣告變數，則變數會變成全域性變數。
  var a=10;
  function fun(){
  var b=20;
  console.log(a);    //10
  console.log(b);    //20
}

全域性作用域不能訪問區域性變數

function fun(){
var a=10;
}
console.log(a);    // a is not defined;

物件

- 物件是一個區別於5種基本資料型別的又一種型別
- 物件是一種複合資料型別，在物件中可以儲存不同型別的屬性

物件的使用:

建立物件:

  1. 建構函式方式: var obj = new Object();
  2. 物件初始化器方式: var obj={};
  3. Object.create()方法: Object.create();

讀取物件的屬性:
物件.屬性名(不適用於複雜命名的屬性名稱)

var person ={
 sex:'man',
 age:30
}
console.log(person.sex);   //man

物件["屬性名"] (適用於複雜命名的屬性名稱)

var obj = {
   
   'Type-Content' : 'text/html',
   
}
console.log(obj['Type-Content']);// text/html

向物件中新增(修改)屬性:
物件["屬性名"]

var iLike={
 hobby:'聽歌'
}
}
iLike['hobby']='睡覺';
console.log(iLike.hobby) //睡覺

物件.屬性名

var person={
 name:'55開'
}
person.name='PDD';
console.log(person,name)  //PDD

列舉屬性
for...in:該方法依次訪問一個物件及其原型鏈中所有可列舉的屬性

var obj={
 name:'孫悟空',
 age:'18',
 hobby:function(){
  console.log('打妖怪')
}
}
for(var i in obj ){
 console.log(i)    // name   age  hobby
}

檢測物件的屬性

- 使用in關鍵字   如果屬性存在返回true  不存在返回false

var obj ={
    name: 'javascript'
};

 console.log('name' in obj);    //true
- 使用Object物件的hasOwnPhasOwnProperty()方法  如果屬性存在返回true  不存在返回false
var obj ={
    name: 'javascript'
};

console.log(obj.hasOwnProperty('name'));  //true
- 使用undefined判斷    如果屬性存在返回false  不存在返回true


var obj ={
    name: 'javascript'
};
console.log(obj.name === undefined);   // false
- 使用if語句進行判斷
var obj ={
    name: 'javascript'
};
if(obj.name){console.log('屬性存在')}    //屬性存在

刪除物件的屬性

可以用delete操作符刪除一個不是繼承而來的屬性

var obj=new Object();
obj.name='孫悟空';
obj.age='18';
delete obj.age;      //刪除物件的自有屬性
for(var i in obj){
console.log(i);     //name
}

相關文章