JavaScript高級プログラム設計ノート---3

8242 ワード

オブジェクトのモードコントラストを作成します.
/**
 *     
 *                     
 *              
 *(            )。
 */
function createPerson(name, age, job){
  var o = new Object();
  o.name = name;
  o.age = age;
  o.job = job;
  o.sayName = function(){
    alert(this.name);
  };
  return o;
} 
let person1 = createPerson('1',21,'test');
/**
 *       
 *                   【instanceof            】
 *        function       ,     ,
 *              
 */
function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayName = function(){
    alert(this.name);
  };
}
let person2 = new Person('1',21,'test');
/**
 *     
 *         function  
 */
function PersonX(name,age,job){
  this.name = name;
  this.age = age;
  this.job = job;
}
PersonX.prototype.sayName = function(){
 alert(this.name);
};
let person3 = new PersonX('1222',21,'test');
person3.sayName(); //"1222" 
原型対象の理解
  • は新しい関数を作成すると、特定のルールのセットに従ってプロトタイプ属性を作成します.この属性は関数のプロトタイプオブジェクトを指します.
  • は、デフォルトでは、すべてのプロトタイプオブジェクトが自動的にconstructor属性を取得します.この属性はプロトタイプ属性の所在関数を指すポインタを含みます.
  • Example:Person.prototype.com nstructorはPersonを指します.(functionも対象です).
  • は、Object.getPrototypeOf()を使用して、オブジェクトのプロトタイプを簡単に取得することができる.(ES 5の特性)
  • 例における同名属性は、インスタンスプロトタイプの値へのアクセスをカバーする.オブジェクトのインスタンスに属性を追加すると、この属性は原型オブジェクトに保存されている同名の属性をブロックします.言い換えれば、この属性を追加すると、プロトタイプの中のその属性にアクセスするのを阻止しますが、その属性は変更されません.
  • は、hasOwnProperty()方法を用いて、1つの属性がインスタンスに存在するか、それともプロトタイプに存在するかを検出することができる.
  • は、1つのオブジェクトを巡回するすべてのエニュメレート・属性が利用可能なObject.keys()である.
  • は、オブジェクトを巡回するすべての例示的な属性を利用できるObject.getOwnPropertyNames().
  • __Proto__が指しているのは親類オブジェクトのプロトタイプで、new(または実装)が出てくるオブジェクトにプロトタイプという属性はありませんが、functionはあります.
  • 元のオブジェクトに新しいカスタム方法を追加することができます.
  • は、属性の共有を起こさずに、callおよびappyの方法により、thisの作用領域を変更し、サブクラスが親の属性を独立させることに成功した.
  • //     
    function Pers(age){ this.age = age; } let ttt = new Pers(21);  
    Object.keys(ttt);
    // >  ["age"]
    Object.keys(ttt.__proto__);
    // >  []
    Object.keys(Pers.prototype);
    // >  []
    Pers.prototype.say = function(){ console.log(`hello, my age is ${this.age}`); }
    ttt.say()
    // >  hello, my age is 21
    Object.keys(ttt.__proto__);
    // >  ["say"]
    Object.keys(Pers.prototype);
    // >  ["say"]
    ttt.say = () => { console.log('come on baby~');}
    ttt.say();
    // >  come on baby~
    let uuu = new Pers(32);
    uuu.say()
    // >  hello, my age is 32
    
    //          
    function SuperType(name){
     this.name = name;
     this.colors = ["red", "blue", "green"];
    }
    SuperType.prototype.sayName = function(){
     alert(this.name); 
    };
    
    function SubType(name, age){
     SuperType.call(this, name); //    
     this.age = age;
    }
    //    
    SubType.prototype = new SuperType();
    SubType.prototype.constructor = SubType;
    SubType.prototype.sayAge = function(){
     alert(this.age);
    };
    let instance1 = new SubType("Nicholas", 29);
    instance1.colors.push("black");
    alert(instance1.colors); //"red,blue,green,black"
    instance1.sayName(); //"Nicholas";
    instance1.sayAge(); //29
    let instance2 = new SubType("Greg", 27);
    alert(instance2.colors); //"red,blue,green"
    instance2.sayName(); //"Greg";
    instance2.sayAge(); //27 
    
    JS間欠呼び出しと遅延呼び出し
  • 間欠呼び出し:let id_1 = setInterval(()=>console.log(1),1000);間欠実行
  • 遅延コール:let id_2 = setTimeout(()=>console.log(1),1000);時間延長だけで
  • を実行します.
  • は、clearInterval(id)を使用して、タイミング実行のタスク
  • をクリアする.
    イベント
  • イベントは、ユーザまたはブラウザ自身が実行するある動作である.
  • イベントフローは、ページからイベントを受信する順序を説明する.イベントフローは2つあります.一つは泡を噴き、一つは捕獲です.
  • 泡が立ちます.イベントの開始時には、最も具体的な要素(ドキュメント内のネストレベルの最も深いノード)によって受信され、その後、より具体的でないノード(ドキュメント)に段階的に伝播されます.
  • 捕捉:具体的ではないノードは、イベントをより早く受信すべきであり、最も具体的なノードは、最後にイベントを受信すべきである.
  • による「イベントハンドラが多すぎる」問題の解決策は、イベント依頼です.イベント依頼は、イベントの泡を利用して、一つのイベントハンドラを指定するだけで、あるタイプのすべてのイベントを管理することができます.