似乎無法理解此JavaScript代碼！ if（！this.class）

這裏新來javascript。似乎無法理解此JavaScript代碼！ if（！this.class）

所以我一直在嘗試學習使用Raphael.js，並遇到了這個http://jsfiddle.net/terryyounghk/AeU2r/代碼片段。

現在，如果你看第167行，有這個「如果」的陳述，我只是不明白。

Raphael.el.style = function (state, style, aniOptions) 
    { 
    if (!this.class) 
    { 
     this.class = style ? style : 'default'; 
     this.aniOptions = aniOptions ? aniOptions : null; 

     // start assigning some basic behaviors 
     this.mouseover(function() { this.style('hover'); }); 
    ....

什麼類？它回來了什麼？誰回來了？

它甚至檢查什麼？這是一堂課？

來源

2013-01-13 dirtyblankets

在if語句的正上方輸入console.log（this）;並激活瀏覽器控制檯。然後重新運行jsFiddle查看對象。 – arttronics

請注意，'class'是JavaScript中的[保留關鍵字]（https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Reserved_Words），因此代碼看起來有點不禮貌。我不會在JavaScript中使用'class'作爲屬性名稱，以避免將來的ECMAScript版本混淆。 – RichardTowers

它只是檢查'this'的'class'屬性是否具有（falsy）值。如果您不熟悉對象，請查看https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects。 –

它檢查是否定義了一個屬性class，如果沒有，它會將它分配給style ? style : 'default'。

來源

2013-01-13 10:40:30 asgoth

「你也可以把它寫成」---好吧，它不等於'if（！this.class）'的100％。我會從答案中刪除。 – zerkms

你看到的是一個簡單的條件語句，看它作爲檢查是否style計算結果爲真或假，如果這是真的this.Class將有style的值，如果它不是一個簡短的if-else子句它會得到值'default'。

我不知道raphael.js是如何工作的，但它在我看來只是一個html元素類。

來源

2013-01-13 10:42:20

*再次檢查此類文件是否爲false * ... uhm，否？它檢查'style'是否是虛假的或真實的。它*將結果賦給'this.class'。總的來說，它的確如下：*「如果'this.class'沒有值，那麼賦值'style'如果它有一個值，否則''default''並做一堆其他的事情。」* –

@FelixKling感謝指出我答案中「非常糟糕」的部分。 –

從Raphael documentation,Raphael.el是一種將自己的方法添加到Raphael.element類的方法。一般來說，這個類的目的是爲了更容易操縱SVG元素。代碼示例中的

this.class與在前面的句子中使用的編程意義上的單詞類無關。也不是（據我所知）是標準拉斐爾框架的一部分。它也不涉及HTML和SVG元素可以具有的class屬性，也不涉及通過JavaScript使用element.className或element.setAttribute('class', '...')訪問的屬性。

this指元素包裝對象（的Raphael.element一個實例），它似乎是誰寫的這個方法的人簡直所使用的名稱class存儲在元素包裝一些額外的信息。（正如在評論中指出，這可能是一個壞主意，因爲class是在JavaScript中的保留關鍵字，但無論如何，它的工作原理。）

具體而言，在本例中，this.class最初undefined，因爲它沒有被分配價值拉斐爾或代碼中的其他地方。在if子句中，!undefined的計算結果爲true，並且在以下行中，style的函數未傳遞任何值，因此style ? style : 'default'的計算結果爲'default'。因此this.class被賦予值'default'。之後，如果右鍵單擊某個形狀並選擇使用自定義樣式，則該形狀的class將變爲「自定義」。

請注意，JavaScript非常容易讓您引用並分配值，但尚未在任何地方初始化的對象的屬性。它不會拋出錯誤，只是返回undefined，如果沒有賦值。

您可以通過插入記錄是怎麼回事對瀏覽器控制檯一行看到這一切：

console.log('style', state, style, aniOptions, this, 'class:', this.class);

，然後使用瀏覽器的開發者工具查看輸出（JSFiddle）。

來源

2013-01-13 15:21:47 Stuart

+1優秀的答案。 – coderLMN

很好的回答！非常感謝你啓發我。 – dirtyblankets

@hellokc很高興幫助...隨時接受這個答案，除非你支持更多的答案。 – Stuart

似乎無法理解此JavaScript代碼！ if（！this.class）

回答

相關問題