javascript言語の精粋.3、オブジェクト4、関数原型チェーンに深く入り込み、対象の原理!

15692 ワード
javascriptの単純なタイプは、数字、文字、ブール値、null値、undefined値を含む.
                  他のタイプは全部対象です.
オブジェクトは可変のキーセットです.javascriptでは、行列は対象であり、関数は対象であり、正規表現は対象であり、オブジェクトも当然対象である.
オブジェクトは属性のコンテナで、属性ごとに名前と値があります.
属性の名前は、空の文字列を含む任意の文字列とすることができます.属性の値はundefined以外の任意の値とすることができます.
javascriptの対象は無分類です.新しい属性の名前と値には制約がありません.オブジェクトはデータの収集と管理に適しています.オブジェクトは他のオブジェクトを含むことができます.
したがって、それらは簡単に樹形または図形構造として表現することができる.
javascriptはプロトタイプチェーンの特性を含み、対象が別のオブジェクトの属性を継承することができます.
 
対象文字数
オブジェクトの字面量は、新規オブジェクト値を作成するために非常に便利な表示法を提供します.
var empty y_object={}
原型
      各オブジェクトは一つのプロトタイプオブジェクトに接続され、そこから属性を継承することができます.
      オブジェクトの字面量で作成したオブジェクトはすべてObject.prototypeというjavascript標準の対象に接続されています.
列挙
       for in文は、オブジェクト内のすべての属性名を巡回するために使用できます.エニュメレート・プロセスは、すべての属性(プロトタイプの属性を含む)をリストします.
       普通はハスOwnProperty方法とtypeofを使って濾過します.
 
関数オブジェクト
javascriptでは関数が対象です.オブジェクトは「名前/値」ペアの集合であり、元のオブジェクトにつながる隠しリンクを持っています.
オブジェクトの字面量が発生するオブジェクトはObject.prototypeにリンクされます.関数オブジェクトをFuntions.prototypeに接続します.
原型オブジェクト自体はObject.prototypeに接続されています. 
各関数は、作成時に2つの追加的な隠し属性があります.関数のコンテキストと関数の挙動を実現するコードです.
各関数オブジェクトは、作成時にプロトタイプの属性を付帯します.
その値(関数オブジェクトの例)は、constructor属性を持ち、値はその関数のオブジェクトです.
呼び出し
関数を呼び出したら、現在の関数の実行を一時停止します.各関数は2つの追加パラメータを受信する:thisとargments.
thisはオブジェクト指向プログラミングにおいて非常に重要であり、その値は呼び出しモード(メソッドコールモード、関数コールモード、コンストラクタコールモード、
アプリ呼び出しモード)
メソッドコールモード:関数がオブジェクトの属性として保存されている場合.私たちはそれを一つの方法と呼びます.thisオブジェクトはこのオブジェクトです.
関数コールモード:関数がオブジェクトの属性ではない場合、関数として呼び出されます.
コンストラクタ呼び出しモード:関数の前にnewを持って呼び出したら、関数にリンクされたプロトタイプのメンバーを隠す新しいオブジェクトを作成します.
                          ,同時にthisは新しいオブジェクトに結合されます.
アプリ呼び出しモード
戻る
関数は常に値を返します.リターン指定を使用していない場合は、undefinedに戻ります.
return文を使うと、return文の後のコードは実行されません.
 
 
プロトタイプ、タイプなどを深く知る
ソース:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <script type="text/javascript">
        window.onload = function() {
            var div_show = document.getElementById("div_show");
 
            Object.prototype.objprototype = function() { }
            Function.prototype.fnprototype = function() { }
            Function.fnStaticfunction = function() { }
 
 
            function people() {
                this.sex = 0;
                this.age = 1;
                this.getName = function() { }
            }
            people.eat = function() { };
            var p = new people();
            for (var i in people.prototype) {
                div_show.innerHTML += "peopleprototype:  " + i + "<br>";
            }
            div_show.innerHTML += "<br>";
            for (var i in p) {
                div_show.innerHTML += "peopleinstance:  " + i + "<br>";
            }
            div_show.innerHTML += "<br>";
            for (var i in people) {
                div_show.innerHTML += "people:  " + i + "<br>";
            }
            div_show.innerHTML += "<br>";
            
 
            function asia() { }
            asia.StaticeatEastFood = function() { }
            asia.prototype = new people();
            asia.prototype.eatEastFoodPrototype = function() { }
 
            var asian = new asia();
 
            for (var i in asian) {
                div_show.innerHTML += "asian:  " + i + "<br>";
            }
            div_show.innerHTML += "<br>";
            for (var i in asia) {
                div_show.innerHTML += "asia:  " + i + "<br>";
            }
            div_show.innerHTML += "<br>";
            for (var i in asia.prototype) {
                div_show.innerHTML += "asia:  " + i + "<br>";
            }
 
            var stooge = {
                "first-name": "J",
                "last-name": "H",
                getName: function() { }
            }
            div_show.innerHTML += "<br>";
            for (var i in stooge) {
                div_show.innerHTML += "stooge:  " + i + "<br>";
            }
 
            Function.prototype.method = function(name, value) {
                this.prototype[name] = value;
            }
            Number.method("getss", function() { });
        }
    </script>
</head>
<body>
<div id="div_show"></div>
</body>
</html>
.           Object.prototype.objprototype = function() { } 
            Function.prototype.fnprototype = function() { }
            Function.fnStaticfunction = function() { }
.           function people() {
                this.sex = 0;
                this.age = 1;
                this.getName = function() { }
            }//        ,              eat,               p
            people.eat = function() { };
            var p = new people();
.           for (var i in people.prototype) {
                div_show.innerHTML += "peopleprototype:  " + i + "<br>";
            }
            div_show.innerHTML += "<br>";
            for (var i in p) {
                div_show.innerHTML += "peopleinstance:  " + i + "<br>";
            }
            div_show.innerHTML += "<br>";
            for (var i in people) {
                div_show.innerHTML += "people:  " + i + "<br>";
            }
            div_show.innerHTML += "<br>";
分析:
people.prototypeの中の対象を出力します.
people.prototype       json  ，              object.prototype   ；
         
objprototype
 
p     people   ，     people.prototype             。
    
objprototype
sex
age
getName
      。 （       fnprototype ,         people instanceof Function
  true，      ：p people   ，      people.prototype    ； people 
function   ，    people    Function.prototype   ）
 
    people    (     Function    Function.prototype  ；  people  ，
   “ ”     )
fnprototype
objprototype
eat
 
//    asia   ,         StaticeatEastFood.
// asia    people ,     prototype  ,       asian  
            function asia() { }
            asia.StaticeatEastFood = function() { }
            asia.prototype = new people();
            asia.prototype.eatEastFoodPrototype = function() { }
            var asian = new asia();
.           for (var i in asian) {
                div_show.innerHTML += "asian:  " + i + "<br>";
            }
            div_show.innerHTML += "<br>";
            for (var i in asia) {
                div_show.innerHTML += "asia:  " + i + "<br>";
            }
            div_show.innerHTML += "<br>";
            for (var i in asia.prototype) {
                div_show.innerHTML += "asia:  " + i + "<br>";
            }
分析:
  asian(asia  )
asian: eatEastFoodPrototype //asia prototype   
asian: getName              //       people 
asian: age
asian: sex
asian: objprototype         //  object 
 
  asia
asia: fnprototype
asia: objprototype
asia: StaticeatEastFood     //    
 
  asia.prototype
asia: objprototype      //  
asia: sex               //   people     
asia: age
asia: getName
asia: eatEastFoodPrototype //       
 
 
 
.           var stooge = {
                "first-name": "J",
                "last-name": "H",
                getName: function() { }
            }
            div_show.innerHTML += "<br>";
            for (var i in stooge) {
                div_show.innerHTML += "stooge:  " + i + "<br>";
            }
/*
            stooge: objprototype
            stooge: first-name
            stooge: last-name
            stooge: getName
*/
.           Function.prototype.method = function(name, value) {
                this.prototype[name] = value;
            }
/*
                 . 
    people.method ('run',function(){alert('    ');})
          。
  ， Function.method , Number.method , String.method ,   Object.method      
         ，    ？
    ，         Object     。Object  prototype           ——
constructor。                 object     ，       JavaScript  
OOP   。  JavaScript       Object，  constructor  ，         
Function(  Object.constructor.valueOf()  ：function Function() { [native code] })。
    。  Number、String       ，              new Number()     。
  OK，Number              。
(Number.constructor ,   function()).
  ，    object  function   ，Function.prototype       ！！！
       object，function  object，       ，
  Function.constructor Function，Function instanceof Object  :true
   ~？！
*/
            Number.method("getss", function() { });
「JavaScript変数作用領域」に関する試験