jsプロトタイプとプロトタイプチェーン、クロージャー、非同期およびシングルスレッドを本当に完全に理解していますか?

1.プロトタイプとプロトタイプチェーン

最初のコード

// 类
class Student {
    constructor(name, number) {
        this.name = name
        this.number = number
        // this.gender = 'male'
    }
    sayHi() {
        console.log(
            `姓名 ${this.name} ,学号 ${this.number}`
        )
 
}

// 通过类 new 对象/实例
const xialuo = new Student('夏洛', 100)
xialuo.sayHi()

const madongmei = new Student('马冬梅', 101)
madongmei.sayHi()

プロトタイプはポインタです。作成された各要素には、オブジェクトを指すプロトタイプがあります。このオブジェクトの目的は、特定のタイプのすべてのインスタンスで共有できるプロパティとメソッドを含めることです

typeof Student
によって作成されたStudent // true クラスはコンストラクタな
ので、

xialuo.sayHi() === madongmei.sayHi()//true

以下は、クラスを使用して継承を実装する別のコードです

// 父类
class People {
    constructor(name) {
        this.name = name
    }
    eat() {
        console.log(`${this.name} eat something`)
    }
}

// 子类
class Student extends People {
    constructor(name, number) {
        super(name)
        this.number = number
    }
    sayHi() {
        console.log(`姓名 ${this.name} 学号 ${this.number}`)
    }
}

// 子类
class Teacher extends People {
    constructor(name, major) {
        super(name)
        this.major = major
    }
    teach() {
        console.log(`${this.name} 教授 ${this.major}`)
    }
}

// 实例
const xialuo = new Student('夏洛', 100)
xialuo.sayHi()
xialuo.eat()

// 实例
const wanglaoshi = new Teacher('王老师', '语文')
wanglaoshi.teach()
wanglaoshi.eat()

あなたが見つけるでしょう

到控制台输入 Student.prototype === xialuo.__proto__ 判断是true

//。Xialuo プロトは、暗黙的なプロトタイプと呼ば
//Student.prototypeが明示的にプロトタイプと呼ばれます

次の重要な点に注意してください。
各クラスには表示プロトタイプがあります。
各インスタンスには暗黙的な
プロトタイプがあります。暗黙的なプロトタイプのポインターは、表示プロトタイプに対応するクラスを指します。
したがって、プロトタイプの実行規則は、まず独自のプロパティとメソッドでそれを見つけることです。プロトタイプで

ここに画像の説明を挿入

以下に示すように
ここに画像の説明を挿入

People.prototype === Student.prototype._proto_ //true

これは、以下に示すように、プロトタイプチェーンをリード学生暗黙ポイント表示プロトタイププロトタイプ親コンストラクタを示し
ここに画像の説明を挿入
、最終的に対象オブジェクトのプロトタイプを指します
ここに画像の説明を挿入

第二に、閉鎖

クロージャを理解する前に、スコープと自由変数を調べてください

Scope:は可変ロールのコードスコープです。ここでは、
javascriptスコープチェーンも重要なポイントです

自由変数:関数パラメーターとローカル変数のみ

自由変数の特徴は次のとおりです
ここに画像の説明を挿入

クローズされるのは次のとおりです。
ここに画像の説明を挿入

最初のケースコード:関数はパラメーターとして渡されます

function print(fn){
    const a = 200
    fn()
}

const a = 100
function fn(){
    console.log(a)
}

print(fn)  // 100

2番目の種類:関数は戻り値として返されます

函数作为返回值
function create(){
    let a = 100
    return function(){
        console.log(a)
    }
}

const fn = create()
const a = 200

fn()//100

ちなみに、
この5つのシーン頻繁にテストされます。この5つのシーンが呼び出されます。
ここに画像の説明を挿入
ここに画像の説明を挿入
関数が定義されたときではなく、関数が実行されたときに、どの値が決定されますか?

ウィンドウオブジェクトを返します
呼び出されたものは何でも
、オブジェクト自体を返し
ます。インスタンス自体に
戻ります。arrow関数は、これを親スコープで返します。

ここに画像の説明を挿入

ここに画像の説明を挿入
アロー関数のthisは親のthisを取ります

ここに画像の説明を挿入

3、非同期およびシングルスレッド

JSはシングルスレッド言語であり、1つのことしかできません

JSはDOM構造を変更できるため、JSとDOMは同じプロセスをレンダリングします。

シングルスレッドが非同期でない場合、待機中(ネットワークリクエスト、時間指定タスクなど)に遭遇すると停止します。

コールバック関数に基づいて非同期的に呼び出されます

以下の非同期のアプリケーションシナリオは何ですか
ここに画像の説明を挿入
ここに画像の説明を挿入
ここに画像の説明を挿入
ここに画像の説明を挿入

コールバック地獄と解決策

こちらをクリックしてください。の詳細な説明の前に
方法2詳細

ここに画像の説明を挿入

ここに画像の説明を挿入
ここに画像の説明を挿入
Cainiaoの調査によると、誤りがあった場合、訂正に感謝し、侵害があった場合、削除について話し合う

159の元の記事を公開 賞賛36 10,000+ビュー

おすすめ

転載: blog.csdn.net/weixin_43342105/article/details/105233379