TIL. NO8. JAVASCRITT(7)オブジェクト向け

8443 ワード
TIL JavaScript テキストリンク

1.オブジェクト向けプログラミング


オブジェクト=言語レベルの構文機能
1つのオブジェクトには、そのオブジェクトが持つ目的、または機能に関連する変数およびメソッドが含まれ、他の論理に関連しない機能があります.
また、使用した論理を他の場所の「リサイクル性」に使用するのに役立ちます.
つまり、オブジェクトは変数とメソッドをグループ化します.
  • 抽象化(抽象)=解決すべき問題や反映すべき現実をソフトウェアの行為に簡略化する

  • 部品化
  • オブジェクト向けは、部品化された頂点
    • である.

  • 非表示/パッケージング=内部の操作方法を硬いハウジング(オブジェクト)内に非表示にし、その部品(方法)の使用方法のみをユーザーに露出します.
    つまり、オブジェクトがどのように作成されているか分からなくても、そのオブジェクトを使用することができます.

  • インタフェース=部品間の規則.異質性結合を阻止する作用もある.
  • ex.モニタとコンピュータを接続するケーブル仕様が標準です.ケーブルの接続点の形状を基準にすればよく、これらの接続点をインタフェースと呼ぶ.

    • 2.ジェネレータとnew


    JavaScript>Prototypeベースのプログラミング
    var person = {}
person.name = 'egoing';
person.introduce = function(){
  return 'My name is' + this.name;
}
document.write(person.introduce());
    name,概要:変数/構成(property)/属性
    function():メソッド(method)
    オブジェクトを定義するときに値を設定するコードを変更すると、
    var person = {
    'name' : 'egoing',
    'introduce' : function(){
        return 'My name is '+this.name;
    }
}
document.write(person.introduce());

  • コンストラクタ

  • 関数の呼び出し時にnewを追加すると、新しいオブジェクトが作成された後に返されます.
    function Person(){}
var p0 = Person(); 
p0 // undefined

function Person(){}
var p = new Person();
p // Person{}

    • function Person(name){
    this.name = name;
    this.introduce = function(){
        return 'My name is '+this.name; 
    }   
}
var p1 = new Person('egoing');
document.write(p1.introduce()+"<br />");
 
var p2 = new Person('leezche');
document.write(p2.introduce());
  • 作成者の役割:オブジェクトを初期化します.
    コンストラクション関数で作成者によって作成された空のオブジェクトがどのようなProperty/メソッドを持つべきかを記述することで、オブジェクトが持つ情報と、そのオブジェクトが実行できる操作を設定できます.これにより、コードの再利用性が大幅に向上します.

    • 3.グローバルオブジェクト


    デフォルトでは、JavaScript内のすべてのオブジェクトはグローバルオブジェクトのプロパティです.
    function func(){
    alert('Hello?');    
}
func(); // Hello?
window.func(); // Hello?
    すべてのグローバル変数と関数は実際にはwindowオブジェクトのpropertyです.オブジェクトが指定されていない場合は、ウィンドウのプロセスとして暗黙的に見なされます.
    ホスト環境によっては、グローバルオブジェクトの名前/グローバルオブジェクトのメソッドが存在するかどうかによって異なります.
    たとえば、WebブラウザJavaScriptにはalert()というグローバルオブジェクトのメソッドがありますが、ノードです.jsには存在しません.また、グローバルオブジェクトの名前もホスト環境によって異なります.Webブラウザでは、グローバルオブジェクトはウィンドウですが、ノードです.jsではglobalです.

    4. this


    »this:関数の呼び出し方法が異なり、オブジェクトを指します.
    function func(){
    if(window === this){
        document.write("window === this");
    }
}
func(); 
// window === this
    オブジェクトが属するメソッドのthisは、そのオブジェクトを指します.
    var o = {
    func : function(){
        if(o === this){
            document.write("o === this");
        }
    }
}
o.func();  
// o === this
    作成者は空のオブジェクトを作成します.このオブジェクト内でthisは作成されたオブジェクトを指す(o 2)
    var funcThis = null; 
 
function Func(){
    funcThis = this;
}
var o1 = Func();
if(funcThis === window){
    document.write('window <br />');
}
 
var o2 = new Func();
if(funcThis === o2){
    document.write('o2 <br />');
}
// window, o2
    function sum(x,y){return x+y;} >> 関数
    =
    var sum = new Function('x', 'y', 'return x+y;'};
    var o = {}
var p = {}
function func(){
    switch(this){
        case o:
            document.write('o<br />');
            break;
        case p:
            document.write('p<br />');
            break;
        case window:
            document.write('window<br />');
            break;          
    }
}

func(); // window
func.apply(o); // o
func.apply(p); // p

    5.継承（継承）


    オブジェクトは関連論理からなるウィジェットといえる.継承は、継承オブジェクトロジックを継承する別のオブジェクトを作成できることを意味します.単純な継承は意味がない.既存の論理を変更および変更することで、派生する新しいオブジェクトを作成できます.
    function Person(name){
    this.name = name;
}
Person.prototype.name=null;
Person.prototype.introduce = function(){
    return 'My name is '+this.name; 
}
 
function Programmer(name){
    this.name = name;
}
Programmer.prototype = new Person();
 
var p1 = new Programmer('egoing');
document.write(p1.introduce()+"<br />");
    Programmerというジェネレータを作成しました.次に、このジェネレータのprototypeをPersonのオブジェクトに関連付け、Programmerオブジェクトドメインメソッドの説明で使用できます.
    ProgrammerはPersonの機能を継承しています.単純に同じ機能を持っていれば、継承の意味は消えてしまいます.親の機能を継承し発展させることが継承の価値である.
    function Person(name){
    this.name = name;
}
Person.prototype.name=null;
Person.prototype.introduce = function(){
    return 'My name is '+this.name; 
}
 
function Programmer(name){
    this.name = name;
}
Programmer.prototype = new Person();
Programmer.prototype.coding = function(){
    return "hello world";
}
 
var p1 = new Programmer('egoing');
document.write(p1.introduce()+"<br />");
document.write(p1.coding()+"<br />");

// My name is egoing
   hello world

    6.prototype(=オブジェクトのプロトタイプ)


    オブジェクトにはpropertyがあり、prototypeは特殊なpropertyであり、その用途は約束されている.プロトタイプに保存されたアトリビュートは、ジェネレータでオブジェクトを作成するときに接続されます.

  • プロトタイプチェーン=オブジェクトとオブジェクトをリンクするチェーンロール
    function Ultra(){}
Ultra.prototype.ultraProp = true;

function Super(){}
Super.prototype = new Ultra();

function Sub(){}
Sub.prototype = new Super();

var o = new Sub();
console.log(o.ultraProp);
//true

    • 7.標準組み込みオブジェクトを展開する（標準組み込みオブジェクト）


    組み込みオブジェクト=JavaScriptが持つオブジェクトのデフォルト
    (ex. Object/Function/Array/String/Boolean/Numer/Math/Date/RegExp)
    <->カスタムオブジェクト

    8.対象オブジェクト


    objectオブジェクトは、オブジェクトの最も基本的な形式を持つオブジェクトです.つまり、何も受け継がない純粋な対象.
  • オブジェクトのプロトタイプは、すべてのオブジェクトで使用可能な機能
    • を有する.
    すべてのオブジェクトにこの機能を持たせる場合は、オブジェクトプロトタイプに機能を追加できます:
  • Object.prototype.~ = すべてのオブジェクトが継承する汎用機能
    オブジェクトオブジェクトは拡張しないほうがいいです.すべてのオブジェクトに影響を与えるからです.
    Object.prototype.hasOwnProperty()=パラメータに渡される値がオブジェクトの属性であることを決定

    • 9.データ型


    元の(デフォルト)データ型とオブジェクト(参照)データ型
    文字列などの元のデータ型がオブジェクトとして使用されると、一時的にオブジェクトとして作成されます.
  • Repperオブジェクト(パッケージングオブジェクト)=文字列に関連する機能もオブジェクトガイドとして提供する必要があるため、Java Scriptは元のデータ型をオブジェクトとして処理するためのオブジェクトを提供する.
    • ex.数値>数値、文字列>文字列、true/false>Boolean、null>X、undefined>X)

    10.「」を参照してください。


    [変数の値が元のデータ型の場合]
    var a = 1;
var b = a;
b = 2;
console.log(a); // 1

    [変数の値がオブジェクト(参照データ型)の場合]
    var a = {'id':1};
var b = a;
b.id = 2;
console.log(a.id);  // 2
    var a = {'id':1};
function func(b){
    b = {'id':2};
}
func(a);
console.log(a.id);  // 1
    var a = {'id':1};
function func(b){
    b.id = 2;
}
func(a);
console.log(a.id);  // 2
    Web開発総合-CSS
    ajaxFileUploadアップロード画像プレビューまとめ