JavaScriptオブジェクトプロトタイププロトタイプチェーン


对象的创建方法

  1. var obj = {} plainObjectオブジェクトリテラル/オブジェクトダイレクト
  2. コンストラクタ
    1. システムの組み込みコンストラクター new Object()
    2. カスタム機能 new FunctionName()

カスタム関数は大きなキャメルケースで名前が付けられます(最初の文字はすべて大文字です)

构造函数内部原理

  1. 関数本体の前にthis =()を暗黙的に追加します
  2. this.xxx = xxx;を実行します。
  3. 暗黙的にこれを返す

パラメータを渡すこともできます

    function Car(number){
    
    
        // this = {};
        this.date = 2020;
        this.number = number;

        //return this;
    }

    new car1 = new Car(1);

包装类

  • あたらしい番号()
  • new String()
  • new Boolean()

元の型には属性とメソッドがなく
、呼び出されると実際には自動的にラッパークラスになります

    //包装类
    var a = 1;

    a.abc = 2;
    // 不忍心报错  自动执行 
    // new Number(1).len = 2;  delete  执行完又删除了

    
    console.log(a.len); // undefined
    // 发现访问属性又自动创建 new Number(4).len  是空的 

文字列には.lengthプロパティがあり、
プロセスは上記と同じです。

    var str = 'abcd';

    str.length = 2;
    // nwe String('abcd').length = 2;  delete
    
    console.log(str);  // 4
    // new String('abcd').length  本身这个属性是存在的

ps。DuYi「オブジェクト、パッケージング(パート2)」後半の演習

原型

.prototype –プロトタイプは祖先です


    Person.prototype.name= 'hello';
    function Person{
    
    

    }
    var a = new Person();
    console.log(a.name);   // 输出 hello 继承自原型

プロトタイプもオブジェクトであり、このように書くことができます

    Person.prototype = {
    
    
        name : 'hello'
    }
    ...
    方别写很多

ただし、後述するわずかな違いがあります

定义

プロトタイプは、
コンストラクターによって生成されたオブジェクトの共通の祖先を定義する関数オブジェクトの属性です。コンストラクターによって生成されたオブジェクトは、
プロトタイプのプロパティとメソッドを継承できます。プロトタイプもオブジェクトです。

功能

コードの重複を減らし、
共通部分をプロトタイプに配置します

修改原型

追加、削除、変更、チェック
プロトタイプ操作を直接操作することしかできません

子要素では操作できません

    function Father(){
    
    
        this.num = 1;
    }
    var father = new Father();

    Son.prototype = father;
    function Son(){
    
    
        
    }
    var son = new Son();

    son.num = 2;  
    //son.num ++;   同

    console.log(father.num);  // 1

これは、息子に新しいnum属性を追加することと同じです。
父親の属性は変更または変更されていません(エラー)
が、これは実行できます。

    function Father(){
    
    
        this.num = 1;
        this.say = {
    
    
            name : 'niko'
        }
    }
    var father = new Father();

    Son.prototype = father;
    function Son(){
    
    
        
    }
    var son = new Son();

    son.say.name = 'dio';   // 二次调用 .name


    console.log(son.say.name);  // dio

変更が成功すると、メソッド内の属性のみを変更できます。これは、2回目の呼び出しに相当します。

constructor

システムのプロトタイプにはコンストラクター属性があり
、コンストラクター返しますが、
手動で変更できます

    

_proto_

_proto_プロトタイプをポイントし、プロトタイプ
とサブオブジェクトを接続し
、属性を見つけた後、_proto_で属性を見つけます

_proto_プロトタイプはデフォルトで保存されます
が、変更できます

2つの書き込みの違い

2番目の変更で違いを生む

    Person.prototype.name = 'hello';

    function Person(){
    
    
        // 系统自动执行 var this = {_proto_ : Person.prototype}
    }

    var person = new Person();

//两种修改方式
// 1.   Person.prototype.name = 'wow';
// 2.   Person.prototype = {
    
    
//       name : 'wow'
//    }
  1. 変更の成功は、スペース内のデータを直接変更することと同じです

  2. Person.prototype.nameはまだhello
    の波ですこの波は、新しいスペースを作成するためのものです。コンストラクターのコメントは、
    理解やすいように_proto_の方向を参照していることに注意してください。

    var obj = {
    
    name : 'a'};
    var obj1 = obj ;
    obj = {
    
    name : 'b'};   //  obj1 指向的还是a

    Person.prototype = {
    
    name : 'a'};
    _proto_ = Person.prototype;
    Person.prototype = {
    
    name : 'b'};

変更されたスペース

1部屋のプロパティを変更します
2部屋を直接変更します

今すぐ注文に注意してください!

    Person.prototype.name = 'hello';

    function Person(){
    
    
        // 系统自动执行 var this = {_proto_ : Person.prototype}
    }

    Person.prototype = {
    
    
       name : 'wow'
    }

    var person = new Person();

これで、背面の新規を正常に変更できます

プロトタイプチェーン

プロトタイプチェーンの構成についてこれ以上言う必要はありません。

追加、削除、変更

上記のプロトタイプと同じ

この小さな知識

    Son.prototype = {
    
    
        name : 'niko',
        sayName : function (){
    
    
            console.log(this.name);
        }  
    }

    function Son () {
    
    
        this.name = 'dio';
    }

    var son = new Son();   // dio

これは、ここでメソッドを呼び出した人が息子の呼び出しであることを示しています

Object.create(プロトタイプ)

より便利な構造

    var obj = {
    
    name : 'sunny' , age : 123};
    var obj1 = Object.create(obj);  // obj1 原型就是obj  可以使用name和age

    等同于
    
    Obj.prototype.name = 'sunny';
    function Obj() {
    
    

    }
    var obj1 = new Obj();
    //var obj1 = Object.creat(Obj.prototype);  和上面相等  构造函数是空的就一样

ほとんどのオブジェクト最もターミナルはObject.prototypeです

プロトタイプチェーンターミナルObject.prototypeに
は、toStringなどのメソッドがあります(ラッパークラスにも独自のtoStringがあります)

ほとんどの場合、特殊なケースがあることに注意してください。Object.creat()を使用して
作成するとプロトタイプがnullなる可能性があります

    var obj = Object.creat(null);


人々_proto_追加した後にnullに設定されたメソッドObject.prototypeにプロパティがありません
(就寝時の疑い)_proto_および.prototype

toStringリライト

123.toStringエラーポイントは浮動小数点数として認識され、変数に割り当てられます
。123のtoStringは、中間量を使用して呼び出されます。これは、ObjectではなくNumber独自のメソッドです。

    var num = 123;
    num.toString();   --> // new Number(num).toString();
    
    Number.prototype.toString = function(){
    
    }   --> 有自己的toString
    Number.prototype._proto_=Object.prototype

この状況は次のように呼ばれ方法重写ます:同じ名前のメソッドは異なる関数を実装しますz
はプロトタイプチェーンのフロントエンドでカバーされています

ToSting();メソッドはdocument.write(xx);が呼び出されたときに呼び出されます

トピック外の精度

jsが通常計算できる範囲は、小数点前16桁、小数点後16桁です。

電話/申し込み

関数thispointの変更
目的は、実行関数のthisを渡されたオブジェクトに変更することです。
違いは、パラメーターリストが異なることです。

    var name = "1";
    var obj = {
    
    
        name:2,
        prop: {
    
    
            name:3,
            getName: function() {
    
    
                return this.name;
            }
        }
    }
    console.log(obj.prop.getName()); //3
    console.log(obj.prop.getName.call(obj)); //2
    console.log(obj.prop.getName.call(this)); //1  在全局的this 是window

3を直接obj.prop.getName()で取得する場合、このメソッドの現在のオブジェクトはpropです。

2を取得したい場合は、obj.prop.getName.call(obj)でobjオブジェクトをメソッドに渡すことができます。今回は、このオブジェクトはobjであり、this.nameはobj.nameと同等です。

1はobj.prop.getName.call(this)と同じです。ここで、これは現在のページであり、ウィンドウは同じです。

もちろん、applyを使用することもできます。applyとcallの違いはcallです。つまり、callメソッドは複数のパラメーターのリストを受け入れますが、applyメソッドは複数のパラメーターを含む配列を受け入れます。apply(thisargs、[])は、配列を使用してパラメーターをメソッドcall(this、param1、param2);に渡します。以下の小さな例

    function callTest(name, price) {
    
    
        console.info(name + "-" + price);
    }
    callTest.call(this, 'superbing', 100);
 
    callTest.apply(this, ['superbing', 200]);

実例

借用别人的函数实现自己的功能

    function Person(name,age,sex){
    
    
        this.name = name;
        this.age = age;
        this.sex = sex;   // Person的this
    }

    function Student(name,age,sex,tel,grade){
    
    
        // var this ={}   等待赋值
        Person.call(this,name,age,sex);
        this.tel = tel;
        this.grade = grade;
    }

    var student = new Student('sunny',123,'male',139,2017);

StudentオブジェクトをPersonに渡して、Personのこれが実際にStudentの変数を参照するようにします
。これは、PersonからStudentの3つの文を取るの同じです。
他の人の構造が完全に自分と一致している場合省略されます。

プロトタイプとプロト

これは良いです

おすすめ

転載: blog.csdn.net/S_aitama/article/details/107393260