常連

注目の的

社会貢献

質問力

Googleの提供している`PageSpeed Module`を使って、
動的に`Javascript及びCSS`の**圧縮(Minify)**と**結合(Combine)**をリアルタイムに行うことを考えています。
仮にCSS・Javascriptにライセンスが含まれたものに上記の処理が施されて、
- ライセンス文そのものが消える
- 結合によって、ライセンス文が先頭に来なくなる
といったことが起きると、ライセンスに反しますか？

*ライセンスは(L)GPL,CC,MIT,Apacheのいずれかを指します

よろしくおねがいします。

JavascriptやCSSを圧縮・結合した際のライセンスの扱い

数あるファイルの中で、それが画像だと判断するのに最も適した基準はなんでしょうか？

画像ってなにをもって画像なのでしょうか？

お世話になっております。

Javascriptの基礎的な部分を本気で理解しようとしているのですが、どうもどの参考書やサイトを見ても一足飛びのところがあり、腹落ちしない部分があります。

まず、私が文字通りで理解していることは

①オブジェクトとインスタンス
名前をキーにしてアクセスできる配列で、プロパティやメソッドにより構成されている。
例えば以下のような波括弧{...}を「オブジェクト」と呼ぶと理解しております。
var obj =
{animal:"dog"//プロパティ,
cry:function(){document.write("ワン");}//メソッド}

オブジェクトを使用するためにオブジェクトを複製したコピーをインスタンスと呼び、new演算子によりインスタンスを作ることができる。この一連の行為をインスタンス化と呼ぶ。
例えば、上記を踏まえて以下のような、オブジェクト変数 copyをobjの「インスタンス」と理解しております。
var copy = new obj();

②コンストラクタ
参考サイトのコンストラクタの説明を読むと以下のように解説されています。
> コンストラクタはオブジェクトを作成し、初期化する関数オブジェクトである。
参考サイト：http://javascript.keicode.com/lang/constructors.php

また、とある書籍では以下のように説明しています。
> 引用テキスト
オブジェクトには、オブジェクトを初期化するために、オブジェクトと同名のメソッドが用意されおり、この初期化メソッドのことをコンストラクタと呼ぶ。オブジェクト名は正確にはコンストラクタ名である。

実際掲載されている参考コードは下記の通りです。
```javascript
function Person(n) { // Constructor
	this.name = n;
	return this; // opt.
}

var p1 = new Person('Hanako');
document.write(p1.name);
```

質問(A)
ここで質問なのですが、コンストラクタとは結局メソッドなのですか？オブジェクトなのでしょうか？例えば、上記の参考コードでも具体的にどこの部分が定義上のコンストラクタであり、それがどのような役割を果たしているのかが全く理解できません。。そもそもこのコードの中で登場するオブジェクトは{this.name....return this;}だけと理解しており、中には何もメソッドはないように私のような素人には見えるのですが。。このオブジェクトではthis.name=n;がプロパティなのかもしれませんが、何もメソッドはないようなに思ってしまします。メソッドではないとしたら、ここのコンストラクタとは一体何なのでしょうか?
単にPersonオブジェクトをnew演算子でインスタンス化してp1という変数にインスタンスが代入されただけではないのでしょうか？


質問(B)
また、何を初期化しており、何のために初期化をしているのでしょうか？このコードから、初期化の過程と目的がうかがい知ることができません。

質問(C)
最後に最も根本的なことで申し訳ないのですが、
function Person(n){...}
obj={animal:"dog"...}
これらの波括弧の中身はどちらも「オブジェジクト」なのでしょうか？そもそもfunctionは自分で定義する関数として先に学んだのですが、これもオブジェクトの一つという整理なのでしょうか。また、関数を呼び出す場合、new演算子を使用することはないと思うのですが、なぜ上記の参考コードでは使用しているのでしょうか？


すみません、あまりにもわからず、的を絞れずにとりとめもなく質問を記載させていただいてしましましたが、端的には1.コンストラクが何を指し、具体的にどのような役割なのかがわからない、2.オブジェクトでも関数のオブジェクトと通常のオブジェクトが何が違うのかがわからないということになりますでしょうか。

上記の参考コードをもとにできるだけ平易な内容でご回答を賜ることができれば大変嬉しいです。わがままを承知で申し上げているため、あらかじめ深いくお詫びを申し上げます。

よろしくお願い申し上げます。

オブジェクト、コンストラクタの考え方

```html:
<div class="table">
    <div class="cell">
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
    </div>
    <div class="cell">
        <div class="wrap">
          <p>Text</p>
        </div>
    </div>
</div>
```
```css:
.table {
    display: table;
}

.cell {
    border: 2px solid #000;
    display: table-cell;
}
.wrap{
    border: 2px solid #000;
}
```
このようなhtmlで、wrapは自動的にheightが0に設定されてしまいます。
http://stackoverflow.com/questions/22220698/height-100-for-div-inside-div-with-display-table-cell
このようにする事でwrapのheightが100%になる事は分かったのですが、そうすると外側のtableまで100%になってしまうので使えません。
tableに100%を設定せずに、wrapの高さを100%にする方法はありませんでしょうか。

cssでdisplay:table-cell;した要素の子要素のheightを100%表示

コードがわからなくて困っております。

ちなみにこれは[react-redux](https://github.com/gaearon/redux-thunk/blob/master/src/index.js)のコードを見ております。

arrow関数が連続で使用されている場合どの順番で評価されて行くのか理解できないです。
```
function createThunkMiddleware(extraArgument) {
  //このreturnでarrow関数を呼び出してnextもactionも多分関数なのでしょうか?どのようにかんがえたらよいのか。。。
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;
```

上のコードの2行目のところが何をやっているのかわからなくて困ってます。

ES5風に書くと

```javascript
return function({dispatch, getState}){
  next({dispatch, getState}){
    action({dispatch, getState})
  }
}
```

のような処理が実行されているということでしょうか?


ちなみにこれはreact-reduxのコードを見ております。
宜しくお願い致します。

ES6の文法でわからないところが

`split("x")`で、yが1度目に出てきたのみ分割し、その後にxがいくつ現れても分割しないということは可能でしょうか。
`split("x",2)`ですと3度目以降分割されたものがなくなってしまうので、違うと思うのですが。
切り取りではなくあくまで分割が希望です。

"x"が","のとき `"りんご,レモン,すいか,ぶどう";` を
fruit[0] = "りんご";
fruit[1] = "レモン";
fruit[2] = "すいか";
fruit[3] = "ぶどう";

ではなく
fruit[0] = "りんご";
fruit[1] = "レモン,すいか,ぶどう";

としたいです。

javaScriptのsplitについて

プロトタイプベースのオブジェクト指向言語は私の知る限り、JavaScriptぐらいしか広く使われているものはないんじゃないかと思います。

しかもJavaScriptもES6からclass構文というシンタックスシュガーを導入しましたし、altJSの一種のTypeScriptも広く使われていますし。

プロトタイプベースという概念を勉強している時に、「この概念、クラスベースと違って難しすぎね？」という感情を抱いていて、今もそれは変わらないです。

ただ勉強を進めているうちに、実はプロトタイプベースの方が概念としてはすごくシンプルで柔軟性があるのではないかという思いも募ってきました。

でも明らかにみんなプロトタイプベースでプログラミングをしたがっていませんよね？それどころかプロトタイプベースという概念を理解していない、しようともしていない人が多いように思います。JavaScriptの文脈で「クラスを作って、そのインスタンスを作る。」とかいう人までいますし。こういった説明は私のような初学者を混乱させるので本当にやめてほしいです。

JavaScript以外のSelfやLuaやIoといった他のプロトタイプベースのオブジェクト指向言語が広く使われていない理由で個人的に考えている理由は以下です。

- 単純に時代の流れ。たまたまクラスベースが流行っただけ。
- 概念的にクラスベースの方が優れているから。
- プロトタイプベースは良くも悪くも柔軟。クラスベースは良くも悪くもプログラマーを縛る。仕事をする上で後者の方が好都合だから。



ぶっちゃけやろうとしていることはどちらもあんまり変わらないし、こんなこと考えている暇があるならコード書いて何か物作れって話ですが、勉強している最中に疑問に思ったので質問しました。

参考文献

[Object-oriented programming](https://en.wikipedia.org/wiki/Object-oriented_programming)
[Self](https://ja.wikipedia.org/wiki/Self)
[Prototype-based programming](https://en.wikipedia.org/wiki/Prototype-based_programming)
[What does it mean that Javascript is a prototype based language?
](https://stackoverflow.com/questions/186244/what-does-it-mean-that-javascript-is-a-prototype-based-language)
___

以下補足です。

1.この質問はタイトルの通り、プロトタイプベースのオブジェクト指向言語が広く使われていない理由を聞いているものです。どちらの概念の方が優れているかといった質問ではないです。**宗教論争をするつもりは一切ありません。**  

2.質問が質問ですし、究極的にはそれらの区別ができないのは分かっていますが、回答の際はできるだけ**明示的に事実と意見の区別**をしていただければ幸いです。  

3.回答の際に参考文献を併せて明記していただけると助かります。

4.私が自分で載せた参考文献はもちろん読みましたが全部読んだ訳では無いので、「てめえの載せた参考文献に書いてあるだろうが読めや。」的な回答を、必要ならして頂けるとありがたいです。

___

補足、修正は適宜行います。じゃんじゃんご指摘ください。ご回答よろしくお願いします。

___

**追記(5/31 4:13)**

ベストアンサーは悩みましたが、sumimさんにしました。

使っている言葉は違うけど、言っていることに共通点があるというのは非常に面白いですね。

みなさんご回答ありがとうございました。非常にためになりました。

プロトタイプベースのオブジェクト指向言語が広く使われていない理由は?

私も初めての経験で、色々調べたのですが解決できないため、質問させていただきます。

firefoxのみ、とあるアンカーリンクが意図したところとずれた場所に飛んでしまいます。
一番下にあるアンカーリンクについてうまくいかず、該当の場所より下のblockに飛びます。
下記例でいうと、リンク10がうまくいかない感じです。
外部ページからもアンカーリンクを使う予定です。

```HTML5

<body>
    <header>
    </header>
        
        <div class="content_right">
            <div id="link1"></div>
            <div id="link2"></div>
                    |
            <div id="link9"></div>
            <div id="link10"></div>
        </div>
        
        
        <div class="content_left">
            <ul class="page_menu">
                <li>
                    <a href="#link1">リンク１</a>
                </li>
                <li>
                    <a href="#link2">リンク２</a>
                </li>
             ｜
                <li>
                    <a href="#link9">リンク９</a>
                </li>
                <li>
                    <a href="#link10">リンク10</a>
                </li>
            </ul>
        </div>
        
    <div class="clear"></div>
<div class="test1"></div>
<div class="test2"></div>
<footer></footer>
</body>


```
試したこと
---
・該当blockとその１つうえにあるblockとを逆にしてみると、どちらも正しく動く
・id名を別の名前にしてみてもNG
・プラグインもダメ
smoothScrollEx.js など
http://creator-index.com/2015/03/870/

有識者の皆様、どうかお力をお貸しください。

何卒よろしくお願いいたします。

【firefoxのみ】アンカーリンクが意図したところとずれる

タイトル通りなのですが、例えば条件式が
`hoge === '123'`みたいな条件式が１０個ぐらいな大量の場合にスマートな書き方ってあるのでしょうか？

現在はインデントを揃えて例えば
```javascript
if (obj_key === '1' || obj_key === '2' || obj_key === '3'
    || obj_key === '6' || obj_key === '5' || obj_key === '4'
    || obj_key === '7' || obj_key === '8' || obj_key === '9'
    || obj_key === '12' || obj_key === '11' || obj_key === '10'
    || obj_key === '13' || obj_key === '14'
    || typeof(obj_key) === 'number') {
```
こんな感じにしています。

この例だと比較対象が数字なのでちょっとは見やすいですが数字ではなく文字になったとき
更に醜くなると感じています。

こういった場合なスマートな書き方ってあるのでしょうか？

if文の条件式が複数あるときのスマートな書き方

DOM操作は遅い、というのをよく聞きます。
例えば appendChild や innerHTML などは、DOM操作してるとは思うのですが、
下記のような、要素を変数に保存するだけ、属性値を取得するだけ、などもDOM操作にあたるのかを知りたいです。


```javascript
// 要素を変数に保存する（id指定）
var hoge = document.getElementById('hoge')
```
```javascript
// 要素を変数に保存する（クラス指定）
var bar = document.getElementsByClassName('bar');
```
```javascript
// 属性値を取得する
var atr = hoge.getAttribute('piyo');
```

（下記はHTML自体に手を加えるため、DOM操作にあたるのではと考えました）

```javascript
// 属性値を指定する
hoge.setAttribute('piyo', 'piyopiyo');

// クラスを追加
hoge.classList.add('hogehoge');

// クラスを削除する
hoge.classList.remove('hogehoge');

// スタイルを追加する
hoge.style.top = 100;
```

DOM操作とは何を指すのか

このコードを書いたら確かに思った通りの動作になるのですが、ページを更新しないと画面幅を取得していないように思いました。
これをページ更新せずに画面幅が変わったときにきちんと狙った処理ができるようにはできるものなのでしょうか？
調べてみましたが、resizeを使えばいけるのかなということに辿り着いた感じです。
実際にresizeで出来るのかすらあまりわかっていないそんな状態です。

```JavaScript
if(window.matchMedia('(min-width:1200px)').matches) {
	//画面幅が992px以上の場合のみ有効。ページ更新時のWindow幅で判断。
	$(function() {
		$('#room-search').hide();
		var gnavi = $('#header-mid');
		var gnaviTop = gnavi.offset().top;
		var gnaviHeight = gnavi.height();
		var bottom = $('#header-bottom');
		var bottomTop = bottom.offset().top;
		var bottomHeight = bottom.height();
		bottom.css('top', -bottomHeight+'px');
		$(window).scroll(function () {
			//TOPから460pxスクロールしたときにroom-searchをほわっと出力。460px未満で隠す。
			if($(this).scrollTop() <= 460 && !$('#room-search').is(':hidden')){
				$('#room-search').hide();
			}else if($(this).scrollTop() > 460 && $('#room-search').is(':hidden')){
				$('#room-search').fadeIn("slow");
			}
			if(($(this).scrollTop() - gnaviTop) < 0){
				//header-midがウィンドウ上部から離れたときの動作をしたときに適応
				gnavi.height(gnaviHeight);
				$('#global-navi li a').css({'padding' : '25px 35px'});
				gnavi.css({position:"static", top: "auto"});
				bottom.css({position:"static", top: "auto"});
				bottom.removeClass('header-shadow');
			}else if(($(this).scrollTop() - gnaviTop) < 55){
				//header-midがウィンドウ上部に触れたときの動作
				gnavi.height((gnaviTop+gnaviHeight+4) - $(this).scrollTop());
				gnavi.css({position:"fixed", top: 0});
				bottom.css({position:"fixed", top: gnavi.height()});
				bottom.removeClass('header-shadow');
				$('#global-navi li a').css({'padding' : ((gnavi.height() -20)/2)+'px 35px'});
			}else{
				//ヘッダーに固定されたときheader-midの高さ30px確保し、ナビメニューの余白を上下5px左右20px保持
				gnavi.height(30);
				$('#global-navi li a').css({'padding' : '5px 35px'});
				gnavi.css({position:"fixed", top: 0});
				bottom.css({position:"fixed", top: gnavi.height()});
				bottom.addClass('header-shadow');
			}
		});
	});
}else if (window.matchMedia('(min-width:991px) and (max-width: 1200px)').matches) {
	$(function() {
		$('#room-search').hide();
		var gnavi = $('#header-mid');
		var gnaviTop = gnavi.offset().top;
		var gnaviHeight = gnavi.height();
		var bottom = $('#header-bottom');
		var bottomTop = bottom.offset().top;
		var bottomHeight = bottom.height();
		bottom.css('top', -bottomHeight+'px');
		$(window).scroll(function () {
			if($(this).scrollTop() <= 460 && !$('#room-search').is(':hidden')){
				$('#room-search').hide();
			}else if($(this).scrollTop() > 460 && $('#room-search').is(':hidden')){
				$('#room-search').fadeIn("slow");
			}
			if(($(this).scrollTop() - gnaviTop) < 0){
				gnavi.height(gnaviHeight);
				$('#global-navi li a').css({'padding' : '30px 20px'});
				gnavi.css({position:"static", top: "auto"});
				bottom.css({position:"static", top: "auto"});
				bottom.removeClass('header-shadow');
			}else if(($(this).scrollTop() - gnaviTop) < 55){
				gnavi.height((gnaviTop+gnaviHeight+4) - $(this).scrollTop());
				gnavi.css({position:"fixed", top: 0});
				bottom.css({position:"fixed", top: gnavi.height()});
				bottom.removeClass('header-shadow');
				$('#global-navi li a').css({'padding' : ((gnavi.height() -20)/2)+'px 20px'});
			}else{
				gnavi.height(30);
				$('#global-navi li a').css({'padding' : '5px 20px'});
				gnavi.css({position:"fixed", top: 0});
				bottom.css({position:"fixed", top: gnavi.height()});
				bottom.addClass('header-shadow');
			}
		});
	});
}else{
	$(function() {
		$('#room-search').hide();
		var gnavi = $('#header-mid');
		var gnaviTop = gnavi.offset().top;
		var gnaviHeight = gnavi.height();
		var bottom = $('#header-bottom');
		var bottomTop = bottom.offset().top;
		var bottomHeight = bottom.height();
		bottom.css('top', -bottomHeight+'px');
		$(window).scroll(function () {
			if(($(this).scrollTop() - gnaviTop) < 0){
				gnavi.height(gnaviHeight);
				$('#global-navi li a').css({'padding' : '30px 20px'});
				gnavi.css({position:"static", top: "auto"});
				bottom.css({position:"static", top: "auto"});
				bottom.removeClass('header-shadow');
			}else if(($(this).scrollTop() - gnaviTop) < 55){
				gnavi.height((gnaviTop+gnaviHeight) - $(this).scrollTop());
				gnavi.css({position:"fixed", top: 0});
				bottom.css({position:"fixed", top: gnavi.height()});
				bottom.removeClass('header-shadow');
				$('#global-navi li a').css({'padding' : ((gnavi.height() -20)/2)+'px 20px'});
			}else{
				gnavi.height(30);
				$('#global-navi li a').css({'padding' : '5px 20px'});
				gnavi.css({position:"fixed", top: 0});
				bottom.css({position:"fixed", top: gnavi.height()});
				bottom.addClass('header-shadow');
			}
		});
	});
}
```

javascriptで画面幅を随時取得し、その幅によっての処理を変えたい

理解不足によるものと承知でタイトルにしましたが、本当に理解に苦しんでいます。
0. iframeのサイズをsytleで指定してもサイズが小さく表示される
0. iframeに被せるようにdivを配置してもiframeの方が上に表示される
0. iframeに被せたdivにopacityを1未満で指定すると上に表示される

__Mac safari,chrome,opera にて動作を確認しました__
__firefoxは「1.サイズが小さく表示される」は発生しませんでした__


![イメージ説明](03db4b39ab7aa8a4b764aa65be7eaf62.png)

index.html
```html
<!DOCTYPE html>
<html>
<head>
  <style>
  body {padding:0;margin:0}
  .overpanel {
    background-color: pink;
    border: 1px solid red;
    box-sizing: border-box;
    width: 600px;
    height: 200px;
    margin: auto;
    margin-top : -200px;
  }
  .frame {
    width: 600px;
    height: 200px;
    display: block;
    margin: auto;
    float: none;
  }
  .contents  {
    border: 20px solid skyblue;
    box-sizing: border-box;
    background-color: lightgreen;
    width: 600px;
    height: 200px;
    margin: auto;
  }
  </style>
</head>
<body>
<div style="height:50px;"></div>

<iframe class="frame" src="iframe-content.html" marginheight="0" frameborder="0" scrolling="yes"></iframe>
<div class="overpanel"></div>

<div class="contents"></div>
<div class="overpanel"></div>

</body>
</html>
```

iframe-content.html
```html
<html>
<head>
  <style>
  .contents  {
    border: 20px solid skyblue;
    box-sizing: border-box;
    background-color: lightgreen;
    width: 100%;
    height:500px;
  }
  </style>
</head>
<body>
  <div class="contents"></div>
</body>
</html>
```

**iframeのサイズをsytleで指定してもサイズが小さく表示される**
iframeのサイズを幅600pxにしていますが、実際には584pxで表示されています。
styleではなくiframe要素widthで`width="600"`にしても結果は同じでした。

**iframeに被せるようにdivを配置してもiframeの方が上に表示される**
iframeの次に配置したdivをマイナスマージンすることで上に重ねていいます。
通常、後から指定されたものが上に重なると理解しているのですが、そうなりません。

**iframeに被せたdivにopacityを1未満で指定すると上に表示される**
なんらかの理由でiframeの優先度が強いのかと思ったのですが…
`opacity:0.99`を指定すると上に表示されます。`opacity:1`だと下になります。
とても不可解な挙動に思えます。


１番の目的は「iframeの上にdivを重ねる」ということなのですが、サイズが小さくなることもデザイン上困っています。
原因と対策をご存知でしたら教えていただけるとうれしいです。

よろしくお願いします。

インラインフレーム(iframe)の理解できない現象…

下記のようなJSONデータがあるとしてscore1、2,3それぞれでソートできるボタンを作ろうと思っています。


```ここに言語を入力
arr =[
 {
   "no": 1,
   "name": "りんご",
   "score_1": 76,
   "score_2": 33,
   "score_1": 46
 },
 {
   "no": 2,
   "name": "ばなな",
   "score_1": 100,
   "score_2": 31,
   "score_1": 56
 },
 {
   "no": 3,
   "name": "みかん",
   "score_1": 78,
   "score_2": 90,
   "score_3": 89
 },
 {
   "no": 4,
   "name": "いちじく",
   "score_1": 83,
   "score_2": 32,
   "score_3": 87
 }
 ]
```


score_1に関しては下記のように書いてソート（昇順・降順）で並び替えができるのですが、このままだと下記をscoreの数ごと記述しなければならないです。
ほぼ同じ記述が増えていく。。。
今後ソートしたいscoreが増えていった場合に困るなと思っています。
できれば共通化をしたいのですが、良い方法はないでしょうか・・・？

```ここに言語を入力
function sort_1(){

    if(flag_score1 == 0){
        flag_score1 = 1;
        arr.sort(function(a,b){
            if(a.score_1 > b.score_1) return -1;
            if(a.score_1 < b.score_1) return 1;
            return 0;
        });
    }else{
        flag_score1 = 0;
        arr.sort(function(a,b){
            if(a.score_1 < b.score_1) return -1;
            if(a.score_1 > b.score_1) return 1;
            return 0;
        });
    }
}

```

ソート機能を共通化させたいです。

下記2つを最後に呼び出してまとめたいのですが、let shoppingCalc =と変数に入れてもfunction 変数名 とトランスパイルされません。

```ここに言語を入力
let shoppingCalc = document.getElementById('shoppingBtn').onclick = () => {
	
};


document.getElementById('shoppingBtnGram').onclick = () => {

};

//まとめる
let shoppingCalcAll = getIdshoppingBtn.addEventListener('click', ()=> {
    shoppingCalcGram();
	shoppingCalc();
});


```
イベントリスナーの場合どのようにして関数に名前を付けて再利用するのでしょうか？

イベントリスナーの場合どのようにして関数に名前を付けて再利用するのでしょうか？

全角文字以外を許可する正規表現はどのように記述すればよいのでしょうか？

正規表現

###前提・実現したいこと
webページで特に再生ボタンなどを表示せず、バックグラウンド上で流すためにはどうしたらいいでしょうか。
###該当のソースコード
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>music</title>
</head>
<body>
<audio  id="music" preload="auto">
        <source src="music.mp3" type="audio/mp3">
        <source src="music.wav" type="audio/wav">
</audio>
<script>
function musicPlay(){
    document.getElementById("music").play();
}
</script>
</body>
</html>

```

###試したこと
sourceで複数書くとブラウザに対応できると書いてあったので複数にしました。

音楽を流すにはどうしたらいいですか？

```javascript
function hoge() {
    this.mob = "mob";
}

console.log(hoge.__proto__ == Function.prototype);
```
たとえば、このコードであればhogeは組み込みオブジェクトのFunctionを元に作られた関数オブジェクトで、すべてのオブジェクトは__proto__プロパティを持っている。
hogeは組み込みオブジェクトFunctionを元につくられたのでhoge.__proto__はFunction.prototypeと同じオブジェクトを参照している。と分かると思うのですが、
```javascript
console.log(hoge.__proto__.__proto__ == Object.prototype);
```
このコードの場合はよくわかりません。
hoge.__proto__はtypeof()で確認すると、functionと出てきます。なので組み込みオブジェクトFunctionを元に作られたオブジェクトだと思うのですが、その場合、Function.prototype.__proto__ということになり、これはFunction.prototypeと同じオブジェクトを参照していると思うのですが、これはfalseになります。
なぜObject.prototypeがtrueになるのでしょうか？
組み込みオブジェクトObjectがFunctionから作られたオブジェクトだということはわかっています
教えて下さい

Javascriptのプロトタイプの関係でわからないことがあります

Google Chromeのタブ関連のイベントリスナーのうちonUpdatedについて質問です。
onUpdatedには二つのstatus「loading」と「complete」があり、1回のonUpdatedイベントでコールバック関数内の処理が2回処理される物だと思っていたのですが

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    alert(changeInfo.status);
});

として確認したところ、上記の2つ以外にundefinedが何回か表示されました。
結果として、コールバック関数内の処理が2回よりも多く処理される結果となっています。

2回よりも多くと表現したのは表示するページなどによって表示される回数が変わるからです。
例えばChromeのバージョンの確認などをする「Google Chromeについて（G）」を開いた場合は
loading → undefined → complete → undefined → undefined

と表示されますが、新しいタブを開いた場合は
loading → undefined → complete

さらにGoogleを開いた場合は
loading → undefined → undefined → complete

という順番でアラートが表示されます。

onUpdatedイベントには「loading」と「complete」以外にも処理をされるタイミングがあるのでしょうか？
通常起こらない場合は考えられる原因を教えていただきたいです。

使用しているChromeのバージョンは49.0.2623.87 mです。
よろしくお願いいたします。