Javascript OOP -- 深入理解函數

CollinPeng 發布于2019-08-20 15:46 / 3366人閱讀

摘要：寫在前面寫這篇文章計劃想了很久，終于付諸行動。此時所指向的空間變成了一個，因為在中函數名相同的后面的會覆蓋前面。特別注意函數的傳入參數與調用無關如果調用傳入兩個參數，而形參只有一個，就只會匹配一個參數。

寫在前面 :

寫這篇文章計劃想了很久，終于付諸行動。一直不知道該從哪里寫，或許文章有錯誤的地方，如果您發現了文章的錯誤，請指正！謝謝！
好句欣賞:
人生為棋，我愿為卒行動雖慢可誰曾見我退后一步?

深入函數與對象

函數就是一個特殊的對象(Object),是Function類的實例,其實在內存中存儲的操作是通過一個鍵值對來存儲.
函數雖然是一個對象，但和對象有一定的區別.

函數的定義與內存模型:

function fn1 () {
    alert("123");
}
var fn2 = fn1;

fn2();    //用fn2完成函數調用,結果是123

這段代碼我相信很多人都能看懂，我們來看看它的內存模型:

舉個例子證明改變fn1的時候fn2并沒有改變，還是上面的例子:

function fn1 () {
    alert("123");
}
var fn2 = fn1;
fn1 = function () {
    alert("111");
};
fn2();    //用fn2完成函數調用,結果還是123

通過上面的兩個例子，雖然fn2 = fn1但是他們指向的是不同的空間，我們可以證實了函數是通過對象的拷貝來完成。

對象的定義與內存模型:

var obj1 = new Object();
var obj2 = obj1;
obj1.name = "lee";

alert(obj2.name);    //lee

我們來看看它的內存模型，畫的有點渣~?乛?乛?

通過上面我們就可以看出，此時修改obj1或者obj2都會將兩個值完成修改，對象是通過引用來指向完成對象的賦值的.

動態語言Javascript函數的靈活性

Javascript中函數真的有重載么?

function sum (num1,num2){
    return num1 + num2;
}
function sum (num1){
    return num1 + 10;
}
alert(sum(10));    //20

我們不難看出，結果為20 <= (這是一句廢話)...我們再看下面的代碼:

function sum (num1,num2){
    return num1 + num2;
}
function sum (num1){
    return num1 + 10;
}
alert(sum(10,20));    //??

我們來思考一下，它的結果返回什么？

沒錯，結果返回為20。此時sum所指向的空間變成了一個，因為在JS中函數名相同的后面的會覆蓋前面。
特別注意：函數的傳入參數與調用無關！！！
如果調用傳入兩個參數，而形參只有一個，就只會匹配一個參數。
所以說，在Javascript中函數沒有重載的功能！

作為值的傳遞

function fn (fun,arg){
    return fun(arg);
}
function say (str){
    alert("Hello"+str);
}
fn(say,"World");      //返回Hello World

動態語言的靈活性非常高，我們不難看出函數還可以作為值傳遞到另外的一個函數中去調用.

作為返回值 (一道例題引發的思考)

我們先來說說數組的排序功能(sort)，看例子：

var arr = [1,2,1,3,5,11];
 
console.log(arr.sort());    //[1, 1, 11, 2, 3, 5]

默認的排序是按字符串來排序的，這么排序肯定是我們不希望看到的。我們都知道sort()方法可以傳遞一個函數,我們來改進一下:

var arr = [1,2,1,3,5,11];

function bySort(num1,num2) {
    return num1 - num2;
}
console.log(arr.sort(bySort)); //[1, 1, 2, 3, 5, 11]

一切看起來都很正常，因為這是數字排序，那么如果我們想給對象排序呢?

function Fn (name,age) {
   this.name = name;
   this.age = age;
  }
 var p1 = new Fn("lee",23);
 var p2 = new Fn("zhangsan",33);
 var p3 = new Fn("Dave",13);
 var ps = [p1,p2,p3];
 ps.sort();        //無效!

我們可以按照剛才的思路再寫一個給姓名的排序的函數，傳入進sort()中進行排序:

function sortByName(obj1,obj2){
   if (obj1.name > obj2.name)return 1;
   else if(obj1.name == obj2.name)return 0;
   else return -1;
}
 ps.sort(sortByName);

那么問題來了，如果我們要寫年齡排序呢？是不是還要寫一個方法，如果還有很多呢，比如地址按字母排序呢？我們來按照函數作為返回值來實現動態排序:

function sortByPro(dynamic) {
  function sortFn (obj1,obj2) {
    if (obj1[dynamic] > obj2[dynamic])return 1;
    else if (obj1[dynamic] == obj2[dynamic]) return 0;
    else return -1;
    }
  return sortFn;
 }
 ps.sort(sortByPro("age"));

就暫時先寫到這里，這是不過是總結的一些小的技巧與心得，如果哪里有錯誤請指正！謝謝！

                                *Brian.lee著*

GPU云服務器云服務器深入理解javascript 深入理解系列深入理解linux 深入理解webrtc

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

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

淺談 OOP JavaScript [完結章] -- 繼承

摘要：構造函數通過原型繼承了構造函數和原型，這就形成了一個鏈條，通俗的講就是原型鏈繼承。而且方法只能冒充構造函數里面的屬性和方法而無法冒充原型對象里面的屬性和方法還有最大的問題就是重復使用。前言：寫到這里，差不多就把OOP完結了，寫了幾篇OOP的文章，但是只是略懂皮毛，可能深入的OOP還有很多，但是我感覺寫到這里也算是差不多完結了。繼承繼承是面向對象比較核心的概念，其他語言可能實現...

張利勇 2019-08-22 10:49 評論0 收藏0
JavaScript深入淺出

摘要：理解的函數基礎要搞好深入淺出原型使用原型模型，雖然這經常被當作缺點提及，但是只要善于運用，其實基于原型的繼承模型比傳統的類繼承還要強大。中文指南基本操作指南二繼續熟悉的幾對方法，包括，，。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。怎樣使用 this 因為本人屬于偽前端，因此文中只看懂了 8 成左右，希望能夠給大家帶來幫助....（據說是阿里的前端妹子寫的） this 的值到底...

blair 2019-08-21 18:26 評論0 收藏0
Underscore 整體架構淺析

摘要：支持形式的調用這其實是非常經典的無構造，其實就是一個構造函數，的結果就是一個對象實例，該實例有個屬性，屬性值是。前言終于，樓主的「Underscore 源碼解讀系列」underscore-analysis 即將進入尾聲，關注下 timeline 會發現樓主最近加快了解讀速度。十一月，多事之秋，最近好多事情搞的樓主心力憔悴，身心俱疲，也想盡快把這個系列完結掉，也好了卻一件心事。本文...

ningwang 2019-08-20 11:59 評論0 收藏0
JavaScript對象的深入理解（二）

摘要：原型的概念不同于構造函數模式創建對象只能單級即成，得益于原型鏈的概念，原型模式可實現類似其他語言的多級繼承。組合使用構造函數與原型模式單一使用原型對象的問題在于所有屬性皆共享，若不想共享某屬性，則可放入構造函數中。之前提到，構造函數方法創建對象存在著方法不共享的問題，因此引申出了原型模式創建對象原型模式原型模式旨在創建一個模版對象，該對象的所有屬性和方法被其實例所共享。原型的概...

tommego 2019-08-21 17:24 評論0 收藏0
深入淺出JavaScript之call()、apply()方法

摘要：的作用在中，方法和方法都是為了改變函數運行時上下文而存在的，換句話說就是為了改變函數體內部的指向。歡迎前端大牛糾正錯誤，如有錯誤我會及時改正。寫在前面：隔了很長時間了，也不知道寫點什么。最近一直在研究ES6，一直想寫出來的文章能對初學者或者是在學習JS路上有所幫助的。這就是我的初衷。 call、apply的作用在JavaScript中，call()方法和apply()方法都是為了...

Cympros 2019-08-20 14:16 評論0 收藏0