1.何を継承していますか？
サブクラスは、親クラスのすべての機能を利用することができ、機能を拡張します。
- 新しいメソッド
- 使用方法
1、使用してES6 extends親クラスの継承のサブクラスを。
// 父类
class A{
constructor(name){
this.name= name;
}
getName () {
return this.name;
}
};
// 子类继承
class B extends A {
constructor(name){
super(name) // 记得用super调用父类的构造方法!
}
getName(){
const name = super.getName();
return name;
}
}
var b = new B('2');
console.log(b.getName()); //2
2、ES5は、メソッドを継承しました。
// 父类
function P(name) {
this.name = name;
}
// 父类方法
P.prototype.get=function(){
return this.name;
}
// 子类
function C(name){
P.call(this,name);
}
// 封装继承。也就是C.prototype.__proto__ = P.prototype
function I(Pfn,Cfn){
var prototype = Object.create(Pfn.prototype);
prototype.constructor = Cfn;
Cfn.prototype = prototype;
}
// 调用继承方法，并传入参数
I(P,C);
var c = new C('maomin');
console.log(c.get()); // maomin
3、ES3の継承
使用ES3の実装の継承が代替以外の何ものでもありませんObject.create(Pfn.prototype)、我々は最初に見
私たちは、パッケージのことを知っているIアプローチが原則ですC.prototype.__proto__ = P.prototype。しかし、ので、我々はそれをお勧めしません__proto__ブラウザが内蔵されたプロパティではなく、JSは、内蔵ので、私はそうすることはお勧めしません。代わりに、パッケージのの方法をしてみましょうObject.create(Pfn.prototype)。
function objectCreate (o) {
function P1() {}
P1.prototype = o;
return new P1();
}
完全なコード：
// 父类
function P(name) {
this.name = name;
}
// 父类方法
P.prototype.get = function () {
return this.name;
}
// 子类
function C(name) {
P.call(this, name);
}
// 封装object.create()
function objectCreate(o) {
function P1() {}
P1.prototype = o;
return new P1();
}
// 封装继承
//C.prototype.__proto__ = P.prototype;
function I(Pfn, Cfn) {
var prototype = objectCreate(Pfn.prototype);
prototype.constructor = Cfn;
Cfn.prototype = prototype;
}
// 调用继承方法，并传入参数
I(P, C);
var c = new C('maomin');
console.log(c.get()); // maomin
4、新しいAPI
ES6新しい方法をReflect.setPrototypeOf()実現することができますC.prototype.__proto__ = P.prototype
function A(name){this.name=name}
A.prototype.get=function () {return this.name}
function B (name) {A.call(this,name)}
Reflect.setPrototypeOf(B.prototype,A.prototype);
var b = new B('maomin');
console.log(b.get()); //maomin
2、約束に、あなたは何を知っていますか？
1.どのような約束こと？
約束は、彼はそのような約束/ A、プロミス/ B、約束/ Dと約束/ A +のアップグレード約束/ Aのような多くの仕様を有しながら、溶液非同期プログラミングであり、およびES6プロミス/ A +の仕様を採用しています。
2.約束の役割は何ですか？
- 「コールバック地獄」の問題を解決
- 同時要求の問題を解決
- 非同期プログラミングコードは、実行順序を理解することの困難な問題を解決するために
「コールバック地獄」の問題を解決するために（1）、
私たちは、ああ、あまりにも冗長感じることはありません参照するには、次のコードを見てください。コードは以上であれば、それを維持することは困難です。
let count = 0;
setTimeout(() => {
count++;
console.log(`地狱${count}层`);
setTimeout(() => {
count++;
console.log(`地狱${count}层`);
setTimeout(() => {
count++;
console.log(`地狱${count}层`);
}, 500);
}, 500);
}, 500);
私たちは、使用見ることができPromise、私は深く地球上にまだ印刷ではなく、それは第一層に常にあります。
let count = 0;
new Promise(resolve =>{
setTimeout(() => {
count++;
resolve();
}, 500);
}).then(()=>{
return new Promise(resolve=>{
setTimeout(() => {
count++;
resolve();
}, 500);
})
}).then(()=>{
console.log('我还在人间')
})
（2）、同時要求の問題を解決するために
行うことができるresult1、result2次のコードが終了後に実行されます。
const result1 = fetch('/getName');
const result2 = fetch('/getAge');
Promise.all([result1,result2]).then(()=>{
// 执行
})
困難な問題を理解するために、非同期プログラミングコードの実行順序解決するために、（3）
私たちは、このシナリオを見ては、getこの方法は、非同期メソッド実行であるgetInfo方法の時間、および最初の実行されないget方法が、最初のプリントアウト我是getInfo方法。
function get() {
setTimeout(() => {
console.log('执行get方法');
}, 1000);
}
function getInfo() {
get();
console.log('我是getInfo方法');
}
getInfo();
// 我是getInfo方法
// 执行get方法
まあ、我々は使用Promise非同期解決するために、我々はES6を使用asyncしてawait待ってget、次のコードを実行し、完全なを実行する方法を。
function get() {
return new Promise((resolve)=>{
setTimeout(() => {
console.log('执行get方法');
resolve();
}, 1000);
})
}
async function getInfo() {
await get();
console.log('我是getInfo方法');
}
getInfo();
// 执行get方法
// 我是getInfo方法
3、どのように約束を達成するために？
私たちは理解して開始しますPromise
Promiseこれは、thenメソッドをthen二つのパラメータの方法resolve、およびrejectPromise3つの含まれているpending(等待态)状態を：resolved(成功态)、rejected(失败态)、。
戻り値成功resolve：
new Promise((resolve,reject)=>{
setTimeout(() => {
resolve('success!') //返回成功状态
}, 1000);
}).then((v)=>{
console.log(v);
},(e)=>{
console.log(e);
})
エラーを返しますreject：
new Promise((resolve,reject)=>{
setTimeout(() => {
reject('error!') //返回失败状态
}, 1000);
}).then((v)=>{
console.log(v);
},(e)=>{
console.log(e);
})
さて、私たちは、パッケージをそれを達成しなければなりませんPromise。
function myPromise(fn) {
this.status = 'pending'; // 初始化等待状态
this.data = undefined; // 初始化一个存储变量
this.resolvedCallback = []; //成功方法保存
this.rejectedCallback = []; // 失败方法保存
const resolve = (val) => {
if (this.status === 'pending') {
this.status = 'resolved';
this.data = val;
this.resolvedCallback.forEach(fu => fu.call(this));
}
}
const reject = (val) => {
if (this.status === 'pending') {
this.status = 'rejected';
this.data = val;
this.rejectedCallback.forEach(fu => fu.call(this));
}
}
fn(resolve, reject);
}
// 封装then方法
myPromise.prototype.then = function (onResolved, onRejected) {
return new myPromise((resolve, reject) => {
const resolvedCallback = () => {
const result = onResolved(this.data);
if (result instanceof myPromise) {
result.then(resolve, reject);
} else {
resolve(result);
}
}
const rejectedCallback = () => {
const result = onRejected(this.data);
if (result instanceof myPromise) {
result.then(resolve, reject);
} else {
resolve(result);
}
}
if (this.status === 'resolved') {
resolvedCallback();
} else if (this.status === 'rejected') {
rejectedCallback();
} else { // this.status === 'pending'
this.resolvedCallback.push(resolvedCallback);
this.rejectedCallback.push(rejectedCallback);
}
})
}
// 使用
new myPromise((resolve, reject) => {
setTimeout(() => {
resolve('success!');
}, 1000);
}).then((v) => {
console.log(v)
}, (e) => {
console.log(e)
}).then(() => {
console.log('1')
})
第三の次のアップデートに注意を払ってください。
