javascript中的 object 和 function

ormsf 發布于2019-08-21 14:16 / 2570人閱讀

摘要：在學習過傳統的面向對象語言后，如，轉學卻有點不適應，特別是中所謂的對象函數，有時候會被搞暈。是可以動態的添加屬性和方法的。不過在申明和使用上，的函數可很大不同。原因定義了兩個相同名字的函數，該名字只屬于后定義的函數所以在中沒有重載這一特性。

在學習過傳統的面向對象語言后，如 java c++，轉學 javascript 卻有點不適應，特別是 javascript 中所謂的 object（對象） function（函數），有時候會被搞暈。于是乎簡單整理了下面的一些概念性的東西，方便學習和理解，會結合一點 java面向對象的知識加以說明。

先了解幾個概念：
1.
首先 Object 在 ECMAScripe 中是指什么，在 ECMAScripe 中有5種簡單數據類型：Undefined，Null,Boolean,Number,String. 還有一種復雜數據類型，那就是Object.

2.
引用類型---java中的類的概念
引用類型的值 --- java中對象的概念

3.
函數 ---- java 中方法的概念

4.
var --- 申明變量的一個操作符，因為 js 的變量是松散類型的，所謂松散就是可以用來保存任何數據，變量僅僅用來表示一個占位符而已，所以變量也不必指定什么 String ，int ，直接var 就可以了，注意對象可以用var 聲明.

5.
Object(), 是什么 --- java中 Object 的構造方法， js 中 Object 的構造函數。

Object

js 是可以動態的添加屬性和方法的。
比如創建一個 Object 實例

var obj = new Object();

變量 obj 就是 new Object() 的對象。
接下來：

var obj = new Object();
obj.name = "Zeng";
obj.age = 12;
obj.fun = function () {
    console.log(this.name+this.age);
}

但這樣封裝性不太好，所以比較經常使用的是對象字面量表示法

var obj = {
    name:"Zeng",
    age:12,
    fun:function () {
        console.log(this.name+this.age);
    }
}
obj.fun();  // 打印出： Zeng12

對象屬性的訪問：

1，采用  中括號
console.log(obj["name"]);

2，采用  點 ， 建議采用此方式
console.log(obj.name );

function
函數對于任何語言來說都是重要的一部分，函數是 js的叫法，你也可以理解為就是 java 的方法，c 語言的函數，都一樣的。不過在申明和使用上， js 的函數可很大不同。

函數的一個示例：

function fun() {
     return "例子";
}
console.log(fun());  // 輸出 ： ‘例子’

還可以這樣：

var fun = function() {
    return "使用表達式創建函數"
};
console.log(fun()); // 輸出 ： "使用表達式創建函數"

上面例子你會注意到函數沒有函數名，只有一個變量名 fun ，表達式尾部還有一個；分號，
你可以把它當作聲明一個變量的表達式就好理解了，聲明其它變量是這么寫的：

var name = "Zeng";  // 有變量名  ，還有 分號

來一個帶參數的例子：

function fun() {
     return arguments[0] + arguments[1] + arguments[2];
}
console.log(fun("這是","一個","例子")); // 輸出 ：“這是一個例子”

是不是有點奇怪，首先我創建的函數沒有帶參數的，在調用的時候有給參數，在函數里面也能獲得參數并返回。
其實這里是要說明一點，js 函數不介意傳遞進來幾個參數，也不在乎參數是什么類型！原因是函數內部接收參數是用一個數組來儲存的！
數組也就是上面的 arguments ，數組當然不介意你傳幾個參數進來，有參數我加一，沒參數我就是 null 。

咱們可以利用這個特性做個例子：

模仿方法的重載--利用參數個數的不同執行不同反應

function fun() {
    if(arguments.length == 1){
        return arguments[0]*10;
    }
    if(arguments.length == 2){
        return  (arguments[0]+arguments[1])*10;
    }
    return 10;
}
console.log(fun(11,111)); // 返回 1220  ！！！！

沒有重載：

上面例子是模仿函數的重載，為什么要模仿呢，我自己創建幾個不同參數的函數不久可以了。

function fun( num1) {
    return "只有一個參數的函數"
}
function fun( num1,num2) {

    return "有兩個參數的函數";
}
console.log(fun(11)); // 輸出 “有兩個參數的函數”

明明調用的是帶一個參數的函數，執行的確是帶兩個參數的函數。原因：js定義了兩個相同名字的函數，該名字只屬于后定義的函數！！！所以在 js 中沒有重載這一特性。

函數名是指針：

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

var new_fun = fun;
fun = null;  // 將 函數 置 null

console.log(new_fun(10,20)); //輸出 ：30
console.log(fun(10,20)); //拋出異常 ：fun is not a function

可看出盡管 fun = null; 但在此之前 var new_fun = fun; 也就是指針也指向了 new_fun 了，所以 new_fun （）函數還能執行，并且函數體沒有置 null

函數也可以作為值來使用：

function add(fun,num) {
    return fun(num);
}
function add_10(num) {
    return num+10;
}

console.log(add(add_10,200)); // 輸出 : 210

可以這么解釋：

function add(  函數   ,   參數   ) {

    return    函數 (   傳遞過來的參數  );
}

函數的 arguments.callee

這是一個遞歸的示例

function fun(num) {
    if(num<=1){
        console.log(num );
        return 1 ;
    }else {
        console.log(num );
        return num * arguments.callee(num-1);
    }
}
console.log(fun(3)); // 輸出 6

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87834.html

JavaScript 原型中的哲學思想

摘要：而作為構造函數，需要有個屬性用來作為以該構造函數創造的實例的繼承。歡迎來我的博客閱讀：「JavaScript 原型中的哲學思想」記得當年初試前端的時候，學習JavaScript過程中，原型問題一直讓我疑惑許久，那時候捧著那本著名的紅皮書，看到有關原型的講解時，總是心存疑慮。當在JavaScript世界中走過不少旅程之后，再次萌發起研究這部分知識的欲望，翻閱了不少書籍和資料，才搞懂...

sugarmo 2019-08-19 18:38 評論0 收藏0
JavaScript中的面向對象（object-oriented）編程

摘要：對象在中，除了數字字符串布爾值這幾個簡單類型外，其他的都是對象。那么在函數對象中，這兩個屬性的有什么區別呢表示該函數對象的原型表示使用來執行該函數時這種函數一般成為構造函數，后面會講解，新創建的對象的原型。這時的函數通常稱為構造函數。。本文原發于我的個人博客，經多次修改后發到sf上。本文仍在不斷修改中，最新版請訪問個人博客。最近工作一直在用nodejs做開發，有了nodejs，...

JerryZou 2019-08-21 10:26 評論0 收藏0
[譯] 為什么原型繼承很重要

摘要：使用構造函數的原型繼承相比使用原型的原型繼承更加復雜，我們先看看使用原型的原型繼承上面的代碼很容易理解。相反的，使用構造函數的原型繼承像下面這樣當然，構造函數的方式更簡單。五天之前我寫了一個關于ES6標準中Class的文章。在里面我介紹了如何用現有的Javascript來模擬類并且介紹了ES6中類的用法，其實它只是一個語法糖。感謝Om Shakar以及Javascript Room中...

xiao7cn 2019-08-21 10:27 評論0 收藏0
JavaScript中的數據類型及其檢測

摘要：中的數據類型及其檢測數據類型基本類型引用類型類型檢測只能檢測基本數據類型，對于還有一個用于檢測某個對象的原型鏈是否包含某個構造函數的屬性適用于檢測對象，它是基于原型鏈運作的屬性返回一個指向創建了該對象原型的函數引用，該屬性的值是哪個函數本身 JavaScript中的數據類型及其檢測 1. 數據類型 1.1 基本類型 Number String Boolean Null Undefin...

Bryan 2019-08-22 10:36 評論0 收藏0
你是否理解js的Object與Function與原型鏈

摘要：原型對象是由創建的，因此原型對象的構造函數是構造函數也可以是稱為對象，原型對象也就繼承了其生父構造函數中的數據，也同時繼承了原型對象的數據。當然這條原型鏈中的數據，會被還是還是這類構造函數繼承，但是不會被這些繼承，他們不處于同一個鏈條上。 js中，Function的本質是什么？Object的本質又是什么？js中有幾條原型鏈？ showImg(https://segmentfault.c...

itvincent 2019-08-20 17:51 評論0 收藏0
前端面試題 -- JavaScript (一)

摘要：前言前兩天總結了一下方面的面試題傳送門，今天翻看了一些面試中常見的幾個問題只是一部分，會持續更新，分享給有需要的小伙伴，歡迎關注如果文章中有出現紕漏錯誤之處，還請看到的小伙伴留言指正，先行謝過以下有哪些數據類型種原始數據類型布爾表示一個邏輯前言前兩天總結了一下HTML+CSS方面的面試題 (傳送門)，今天翻看了一些 JavaScript 面試中常見的幾個問題（只是一部分，會持續更新...

junnplus 2019-08-23 15:59 評論0 收藏0