線上訂房服務-台灣趴趴狗聯合訂房中心
發文 回覆 瀏覽次數:2906
推到 Plurk!
推到 Facebook!

再度看 java s cript 後的感言

 
aftcast
站務副站長


發表:81
回覆:1485
積分:1763
註冊:2002-11-21

發送簡訊給我
#1 引用回覆 回覆 發表時間:2015-03-17 21:41:41 IP:114.32.xxx.xxx 訂閱
因學習不少的程式語言,久不用某語言,難免會忘了一些語法。

剛又重複看 javascript,說真的,不由自主的想說它是個(XXOO#$#Q%)的語言。語法之嬌情的。好像是為了要某個目的而硬加入某些元素。那種感覺就像是一個早期沒規劃好的城市地區,建亂後,才來做一些東補西補的建設,整個道路亂,路名也是亂接。如果說javascript比做一個地區,那它一定是 「台北的永和區」!

神奇的是,習慣住那裡的人們,都很能適應那種環境,建起自己的程式時也是比照亂來的辦理。到處 function object,anonymous function,closure,外加隨時可以加入object的屬性與prototype…

這種動態語言真的很動態,難聽是亂,好聽是靈活。但唯一可以肯定的是… 若你一陣子沒寫,很快的,無論是別人寫的,或是自己寫的,都是別人寫的……

你覺得呢?

舒發完情緒…繼續工作。 :)

ps 僅管如此,它的ecosystem實在是大到不行,全球網頁的前端就它一支獨秀,不去懂與用也不行呀! 我在搞 node js 啦!

------


蕭沖
--All ideas are worthless unless implemented--

C++ Builder Delphi Taiwan G+ 社群
http://bit.ly/cbtaiwan
編輯記錄
aftcast 重新編輯於 2015-03-18 05:56:29, 註解 無‧
aftcast
站務副站長


發表:81
回覆:1485
積分:1763
註冊:2002-11-21

發送簡訊給我
#2 引用回覆 回覆 發表時間:2015-03-20 02:55:39 IP:111.243.xxx.xxx 訂閱
又經一天的複習,感覺內力充沛了。 :)

要檢驗對 javascript 是否測底理解,最好就是去挑戰 jquery 源碼的實作,至少開始的500行吧。
以下是引用 nuysoft.iteye.com/blog/1182087 這位作者的文。

functionundefined
varfunction 构建对象
varfunction jQuery.fn.init( selector, context, rootjQuery );

// jQuery jQuery.fn = jQuery.prototype = {
init: ( selector, context, rootjQuery ) {
// selector7 元素
// body 字符串:标签、字符串、、选择器表达式
// ready 最后返回伪数组
};
init function the jQuery prototype for later instantiation

// 通过扩展的函数,大部分都会调用通过扩展的同名函数
function

// jQuery jQuery.extend({
// ready bindReady
// parseJSON parseXML
// each makeArray inArray merge grep map
// access
// sub
});
到这里,对象构造完成,后边的代码都是对对象的扩展
return


})(window);


有興趣的可以試著理解看看。這裡面的東西,涵蓋了我最上面po的那些技術。個人覺得最大的關鍵是:
1/ javascript 的 function object 是 first class citizen
2/ 它是 prototype programming (classless) 典範

那二點深切的會造成熟一般用 class 建物件的靜態語言,如delphi,c 等,昏頭! 因為太大不一樣的觀點了。

因時間有限,加上這裡是delphi的forum,會想學javascript的朋友也不一定在這,所以我就暫不po我的精華筆記。待有時間,或有人真的想了解時再來po了。

------


蕭沖
--All ideas are worthless unless implemented--

C++ Builder Delphi Taiwan G+ 社群
http://bit.ly/cbtaiwan
aftcast
站務副站長


發表:81
回覆:1485
積分:1763
註冊:2002-11-21

發送簡訊給我
#3 引用回覆 回覆 發表時間:2015-03-20 03:00:58 IP:111.243.xxx.xxx 訂閱
對了,大陸的那篇,讀的是 jquery 1.61,可在下面下載

code.jquery.com/jquery-1.6.1.js

而因為其中有段我覺得很鬼 :

jQuery.fn.init( selector, context, rootjQuery );

所以我特查了一下大概的原因:

groups.google.com/forum/#!topic/jquery-en/K9aNKgW4PtM

於是我就去查了 jquey 1.0版來的比較一下

code.jquery.com/jquery-1.0.js


以上,希望對有興趣的人有一點小幫助! ;)

另外,推一篇不錯的 javascript 介紹文,該作者一系列的文我覺得很欣賞,適合我。也可能適合你。可以參考參考…

openhome.cc/Gossip/JavaScript/

------


蕭沖
--All ideas are worthless unless implemented--

C++ Builder Delphi Taiwan G+ 社群
http://bit.ly/cbtaiwan
編輯記錄
aftcast 重新編輯於 2015-03-20 03:04:27, 註解 無‧
aftcast
站務副站長


發表:81
回覆:1485
積分:1763
註冊:2002-11-21

發送簡訊給我
#4 引用回覆 回覆 發表時間:2015-03-21 07:17:56 IP:111.243.xxx.xxx 訂閱
margin-top:0in;margin-bottom:0in">
  • Custom object is merely a hash table, i.e., key-value. Key is the string type, value is any kind of type.
  • Function object and Custom object can own their custom key-value.


    • Function object prototypevalueobjectprototypeobjectfunction objectobjectconstructor(key)valuefunction objectreferencevar foo = new bar(); foo object/bar function objectprototypevalue (object reference) barfoo(key-value) ? function bar() { this.a=1; this.b=function() {};… }thisfoo new foo(allocate)bar()fookey-valuefoobar a=1b(foo)barprototypeobjectfunction objectobject(key-value)classlessclassfunction objectobjectclassjavascriptthisclassthisplaceholder/ fx foo.fn = fxbar.fn =fxfoo.fn( )fxthisfoobar.fn() fxthisbarclosure javascriptfunction object free variablesclosure (free variables)
    • 中的一但被後,數值就不會變。是一種的行為,而非的行為。
    • 的實作方式就是使用,即另一個內部的。其中的就是一個,一開始先執行函式,然後回傳一個內部的,即


    心得之所以是心得,就是只寫了該注意或是特別的地方。若想要了解全部,還是要自己去看所有細節。

    ^_^

  • ------


    蕭沖
    --All ideas are worthless unless implemented--

    C++ Builder Delphi Taiwan G+ 社群
    http://bit.ly/cbtaiwan
    編輯記錄
    aftcast 重新編輯於 2015-03-21 07:19:06, 註解 無‧
    Coffee
    版主


    發表:31
    回覆:878
    積分:561
    註冊:2006-11-15

    發送簡訊給我
    #5 引用回覆 回覆 發表時間:2015-04-01 16:33:52 IP:42.70.xxx.xxx 訂閱
    Well, for function is the first class citizen, so a function object is just a class object that are implemented by a specialized class. So all functions you implemented can be treated as a object that are produced by your custom class inherited from a super function class, and they just contain different members(key/value pair in your respect but you access them in variable normally).

    So, when you implement "var foo = new bar();", that means you create an object that are implemented by bar class, it's not inheritation. So in a normal class definition you use this reference like you use self reserved word in Delphi. When calling this reference, it depends on what scope and who is called. So in my opinion, following codes shows each reference:

    foo.fn = fx; //data member fn of bar is assigned to fx.
    if fx is a function and call it in function, this reference is foo


    bar.fn = fx; //data member fn of bar is assigned to fx.
    if fx is a function and call it in function, this reference is bar
    This is nothing different from normal class, because when you assign fn member to fx, and call it, the function implementation is changed to fx. Just take it as a method pointer reference.
    And yes you can add/delete the object data member at runtime, but you just modify this object but not the class implementation.
    Closure treated as life scope in lots of structure and OO programming, maybe you can treat closure as a "Anonymous class" when you construct something into it, things like you implement in java:
    Thread t = new Thread(){
    @Override
    void run()
    {
    //do what you need here.
    }
    }
    This is a common implementation you will see in lots of java demo. You construct an object, this object is implemented a unnamed class and inherited from Thread class, implement necessary code in the same time. So check the following code, the variable t should be invalid after the outter scope.
    {
    Thread t = new Thread(){
    @Override
    void run()
    {
    for(;;)
    }
    }.start();
    }
    But in this tricky code, only the reference is deleted, the instance of t is actually alive untill program is terminated.
    So, when you write an nested function, actually you just construct a member for it's outer class, nothing more :P
    ------
    不論是否我發的文,在能力範圍皆很樂意為大家回答問題。
    為了補我的能力不足之處,以及讓答案可以被重複的使用,希望大家能儘量以公開的方式問問題。
    在引述到我的文時自然會儘量替各位想辦法,謝謝大家!
    編輯記錄
    Coffee 重新編輯於 2015-04-01 16:38:17, 註解 無‧
    Coffee 重新編輯於 2015-04-01 16:55:37, 註解 無‧
    Coffee 重新編輯於 2015-04-02 01:42:19, 註解 無‧
    aftcast
    站務副站長


    發表:81
    回覆:1485
    積分:1763
    註冊:2002-11-21

    發送簡訊給我
    #6 引用回覆 回覆 發表時間:2015-04-01 18:58:12 IP:114.32.xxx.xxx 訂閱
    Thank you. I know it must be you my friend when I received the email notification.  ;)


    >>Well, for function is the first class citizen, so a function object is just a class object that are implemented by a specialized class. So all functions you implemented can be treated as a object that are produced by your custom class inherited >>from a super function class, and they just contain different members(key/value pair in your respect but you access them in variable normally).
    Yes if you just "treat" it as if it is kinda class, though js actually is a classLESS paradigm. It's also intresting that ES6 version introducing new keyword class,
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/class
    but according to that documentation, It just looks like a class.

    The class expression is one way define a class in ECMAScript 6. Similar to function expressions, class expressions can be named or unnamed. If named, the name of the class is local the class body only. JavaScript classes are using prototype-based inheritance.
    About closure, I think it beyonds anonmous function. Closure object is kinda subset of function object in JS. In JS programming, only inner function object returned could be said it is a closure. It's much like a functional programming "curry" concept ,which can return different function object relying on condidtions and "save" status for latter calls. Normally people just input normal function object as a parameter in calling function in so called event driven model. Fewer people input a closure object as a parameter, for example, fx(100) or fx(), (please note it is a function call, not fx variable). Well, you might say that fx(100) will return a function object, so actually fx(100) still means function object. Yes, but fx(100) is different from fx, the first one we call it closure, the later one we just simply called it function object. Closure will keep the same "status" everytime you call it. For instance,
    var foo = fx(100); // no NEW keyword here, new fx(100) is different meaning.
    foo("the price is");
    foo("ask again the price is");
    above 2 expressions will have the same "status" since 100 was bound.
    The other interesting thing is I really don't know when you MUST use closure instead of normal function object. In functional programming language, like haskell, closure is very important since it use it to keep function status and may recursively call the function. However, if we use OOP paradigm, yes, function object is enough, I think. And yes, normal function object is very similar to anonymous function.
    https://en.wikipedia.org/wiki/Closure_(computer_programming)
    The term closure is often mistakenly used to mean anonymous function. This is probably because many programmers learn about both concepts at the same time, in the form of small helper functions that are anonymous closures. An anonymous function is a function literal without a name, while a closure is an instance of a function, a value, whose non-local variables have been bound either to values or to storage locations (depending on the language; see the lexical environment section below).

    ------


    蕭沖
    --All ideas are worthless unless implemented--

    C++ Builder Delphi Taiwan G+ 社群
    http://bit.ly/cbtaiwan
    編輯記錄
    aftcast 重新編輯於 2015-04-01 19:00:21, 註解 無‧
    aftcast
    站務副站長


    發表:81
    回覆:1485
    積分:1763
    註冊:2002-11-21

    發送簡訊給我
    #7 引用回覆 回覆 發表時間:2015-05-04 18:55:19 IP:114.32.xxx.xxx 訂閱
    再次分享我的 javascript 關於 this 的筆記。主要是以別的物件導向言語,如 c++,c#,java,delphi… 的角度來看待 JS 。為什麼需要這樣呢? 我的看法,當你學了很多種語言後,若你沒深思、分門別類與組合,你就無法精通各種語言。

    JS 世界稱的 function,不該稱 function,要稱 function object,它像是 C 的 functor,或是 C# 的delegate obj。但不是 C 語言中的 function。
    JS 世界裡所稱的 method,在其他的語言裡應該對應的是 event。event 是一種特別的property。event 所存取的型別通常就是 functor/delegator。
    JS 所有的 functor,都穩含一個 this 指標/參考。這與其他 OOP 語言的 method是一樣的情形。但與 C 語言的 function 完全不同 !
    JS (prototype paradigm)的 this 是 void 型別 ; 其他 class paradigm 語言中的 this/self 是「某class 的型別」。這是我推論、思考、比較各語言後的一個精華結論!
    由於上述的情形,造成了 JS 可以接受任意的物件來呼叫該 functor 。相反地,像是 C 就只能是指定的類別物件來調用。
    因為 JS 的 this 是 void 型別,就造成了一堆文章要非常特別的說明 this,但通常也寫的不清不楚。若不明白 this 的真正內函,會 debug 到瘋掉!
    因為 JS 沒有真的 method (請參照上面的重點),JS 有的是 event,所以 event handler 是可以在任意的地方被定義,不限定在某物件中被定義。你可以隨時把不同的 handler (functor) 指定給某物件的 event。若你用 method 的眼光來看,你就輸了!
    為什麼 closure object (某 inner functor) 裡的 this 不會是呼叫者? 因為 event handler 的 this 只會被傳入一次(當某物件調用它時,物件pass進去)。event handler 裡面的 inner functor 的 this 參數並沒被psss進去。以 strict mode 來看 inner functor裡的 this 永遠是 undefined。以 非 strict mode 下來看,它永遠是指向 window 這個最上層的 object。解法就是在 event handler 裡定義一個變數,比如 var foo = this;把 foo 傳入給 inner functor,使它可以取用呼叫handler的那個物件。 以上是我的深入另類理解。
    為什麼 JS 的 functor 有 bind,call,apply 這些內建 event (注意,請習慣不要叫它方法) ? 原因就是 functor 隱含的 this 是 void 型別,非限定給某一個型別專用 (其他 OOP 語言幾乎都會限定),所以才會延伸這些功能,讓程式人員可以自己在某些情形下,指定要被傳入 this 的物件是誰。
    var foo = new BAR(); 的內部流程應該是: 1/ 建立/配置一個空物件(或稱原型)給 foo。2/ 將配置好的物件(foo)傳入 BRAR的 隱含 this 參數。3/ 最後透過 BAR 的「隱含回傳 this 功能」回 this 給 foo (當然此時 this 就是 foo,foo就是 this)。

    ------


    蕭沖
    --All ideas are worthless unless implemented--

    C++ Builder Delphi Taiwan G+ 社群
    http://bit.ly/cbtaiwan
    系統時間:2024-04-20 5:07:36
    聯絡我們 | Delphi K.Top討論版
    本站聲明
    1. 本論壇為無營利行為之開放平台,所有文章都是由網友自行張貼,如牽涉到法律糾紛一切與本站無關。
    2. 假如網友發表之內容涉及侵權,而損及您的利益,請立即通知版主刪除。
    3. 請勿批評中華民國元首及政府或批評各政黨,是藍是綠本站無權干涉,但這裡不是政治性論壇!