全國最多中醫師線上諮詢網站-台灣中醫網
發文 回覆 瀏覽次數:2040
推到 Plurk!
推到 Facebook!

再度看 java s cript 後的感言

 
aftcast
站務副站長


發表:81
回覆:1482
積分:1762
註冊: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
回覆:1482
積分:1762
註冊:2002-11-21

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

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

(function( window, undefined ) {

var jQuery = (function() {
// 构建jQuery对象
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context, rootjQuery );
}

// jQuery对象原型
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
init: function( selector, context, rootjQuery ) {
// selector有以下7种分支情况:
// DOM元素
// body(优化)
// 字符串:HTML标签、HTML字符串、#id、选择器表达式
// 函数(作为ready回调函数)
// 最后返回伪数组
}
};

// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;

// 合并内容到第一个参数中,后续大部分功能都通过该函数扩展
// 通过jQuery.fn.extend扩展的函数,大部分都会调用通过jQuery.extend扩展的同名函数
jQuery.extend = jQuery.fn.extend = function() {};

// jQuery上扩展静态方法
jQuery.extend({
// ready bindReady
// isPlainObject isEmptyObject
// parseJSON parseXML
// globalEval
// each makeArray inArray merge grep map
// proxy
// access
// uaMatch
// sub
// browser
});

// 到这里,jQuery对象构造完成,后边的代码都是对jQueryjQuery对象的扩展
return jQuery;

})();

window.jQuery = window.$ = jQuery;
})(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
回覆:1482
積分:1762
註冊: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

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

return new 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
回覆:1482
積分:1762
註冊:2002-11-21

發送簡訊給我
#4 引用回覆 回覆 發表時間:2015-03-21 07:17:56 IP:111.243.xxx.xxx 訂閱
我習慣在紙上寫心得或是塗鴨,昨天整理了一下javascript的手稿筆記成了電子檔。既然都寫好了,就直接貼出來給有緣人看了。技術、心得藏著沒意義,還是要能幫助到他人才有價值。 :)

以下是寫給自己看的,所以不一定有調理,若有疑問,可以po文來討論。

  • Function object is the first class citizen.
  • Custom object is merely a hash table, i.e., key-value. Key is the string type, value is any kind of type.
  • OOP in javascript is the classless / prototype paradigm.
  • Function object and Custom object can own their custom key-value.
  • Function object has prototype key(attribute), which act as if "base" object.


  • Function object 之所以叫這個名稱,就是因為它有二個角色,其一是就是代表一個函式,另一個就是它可以保存永續的資料。該永續的資料就是 prototypevalue,是一個objectprototype關連的這個object,在function object被建立後就會產生,且這個object裡會有一個constructor屬性(key),它的value就是function object本身的reference
  • var foo = new bar(); 這樣子所建構的 foo object,繼承/擁有了bar function object裡的prototypevalue (存著object reference) bar又是如何的規劃、設定foo的成員(key-value,或稱屬性) ? function bar() { this.a=1; this.b=function() {};… }其中的this就代表著foo這個物件。 new 這個關建字會為foo建立一個記憶體區塊(allocate),然後這區塊會經過bar這個函式(在這種情形下亦稱建構式)來產生fookey-value。以上面的例子來說,foo經過bar的初始化後就會有 a=1b是個函式(或稱foo的方法),還會繼承bar裡的prototype上的object
  • function object與自訂的object,都可以在它們生成後再加入或刪除它的屬性(key-value),這是動態語言的特色與能力。所以很多時候都是事後補屬性而不是一開始就寫在裡面。這是classless的典範。因為沒有類別class,所以是用物件來建物件,精確講就是function object來建object,而不是透過class來建構。
  • javascriptthis指標,與般用用class建構物件的用法不太一樣。this在函式中代表的是一個placeholder,會因呼叫/調用的物件而變。任何的函式都可以被設成任意物件中的一個屬性。比如一個 fx 函式可以是 foo.fn = fx,也可以同時是bar.fn =fx,可是當foo.fn( )叫用時,fx裡的this就是foo。而bar.fn() 叫用時,fx裡的this就是bar
  • closure 是一種物件。在javascript中是一種特別的function object。它包含了一個函式還有之於該函式的環境變數,那些變數之於函式就是 free variables。簡言之,closure是函式 環境變數(free variables)
  • js 中的 free variables一但被capture後,數值就不會變。是一種copy的行為,而非reference的行為。
  • closurejs的實作方式就是使用 nested function,即function objectreturn另一個內部的function object var foo = fx(100); foo(23); 。其中的foo就是一個closure object,一開始先執行fx函式,然後回傳一個內部的function object,即foo


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

^_^

------



蕭沖
--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
回覆:1482
積分:1762
註冊: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
回覆:1482
積分:1762
註冊: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
系統時間:2017-12-13 15:27:19
聯絡我們 | Delphi K.Top討論版
本站聲明
1. 本論壇為無營利行為之開放平台,所有文章都是由網友自行張貼,如牽涉到法律糾紛一切與本站無關。
2. 假如網友發表之內容涉及侵權,而損及您的利益,請立即通知版主刪除。
3. 請勿批評中華民國元首及政府或批評各政黨,是藍是綠本站無權干涉,但這裡不是政治性論壇!