1.1 HTML 面接の質問
1. インライン要素、ブロックレベル要素、空要素とは何ですか?
インライン要素: a、b、span、img、input、strong、select、label、em、button、textarea
ブロックレベル要素: div、ul、li、dl、dt、dd、p、h1-h6、blockquote 空要素: br、
メタ、hr、リンク、入力、画像
2. ページにスタイルをインポートする場合、リンクと @import の違いは何ですか?
1.linkはスタイルシートだけでなくファビコンなど他の項目もインポートできるが、@importはスタイルシートのみインポートできる
2.linkはXHTML構文であり互換性の問題はないが、@importはCSS2でのみ提案されたものである。 1、および IE5+ 以降のバージョンでのみサポートされているため、それ以前のバージョンのブラウザーとは互換性がありません
3. JS を通じて DOM を操作し、リンク タグを挿入してスタイルを変更できます。DOM メソッドはドキュメントに基づいているため、 @import を使用してスタイルを挿入することはできません。
4.linkはページの読み込みと同時に読み込まれ、@importはページの読み込み後に読み込まれます。
3. title と h1 の違い、b と Strong の違い、i と em の違いは何ですか?
title と h1 の違い title タグで表されるタイトルは、Web ページ全体の名前です。つまり、ブラウザ上部のタブ バーに表示される h1 タグは、Web ページのコンテンツのタイトルです。記事のタイトルまたは Web ページ内のテキストの特定の段落に相当します
。b と Strong の違いは視覚的には同じですが、意味的に言えば、b は単に太字であり、strong はコンテンツを強調するため、一般に SEO に役立ちます。
i と em の違い i タグの役割: フォントを斜体に見せるだけであり、SEO には影響しません。
em タグの役割: フォントを斜体にするだけでなく、トーンを強めて検索エンジンにこれが重要であることを伝えます。
4.画像のタイトルと代替の違いは何ですか?
alt は画像の読み込みに失敗したときに Web ページに表示される代替テキスト、title はマウスを置いたときに表示されるテキストです。
これらは表面的な違いで、alt は img の必須属性ですが、title は必須ではありません。
5. png、jpg、gif 形式はどのような場合に使用されますか?
1.png: ロスレス圧縮。jpg/jpeg より大きく、小さなアイコンにのみ適しています。
2.jpg/jpeg: 圧縮アルゴリズムを使用しており、多少の歪みがあり、png よりもはるかに小さい
3.gif: 通常はアニメーション画像のみが生成され、Google の webm 形式に置き換えられています
4.webm: 新しいファイルGoogle が提案した形式、YouTube と Flash の優れたサポート、モバイル デバイスのスムーズさ
1.2 CSS 面接の質問
6. CSSボックスモデルを導入しますか?
標準ボックスモデル: 幅 = コンテンツ幅 (コンテンツ) + ボーダー + パディング + マージン
低バージョン IE ボックス モデル: 幅 = コンテンツ幅 (コンテンツ + ボーダー + パディング) + マージンボックスサイジングプロパティ? 要素のボックス モデルを制御するために使用される解析モード。デフォルトは content-box です。context
-box: W3C の標準ボックス モデル。要素の高さ/幅属性の設定は、コンテンツ部分の高さ/幅を参照します
。 -box: IE従来のボックスモデル。要素の高さ/幅属性の設定は、
ボーダー + パディング + コンテンツ部分の高さ/幅を指します。
7.行の高さと高さの違いは何ですか?
height は要素自体の高さ、line-height は要素内のテキストの行の高さです
。要素の高さと行の高さが同じである場合、テキストの行が要素内で垂直方向の中央に配置されていることを意味します。
8.CSS セレクターとは何ですか? どのプロパティを継承できますか?
CSS セレクター: ID セレクター (#myid)、クラス セレクター (.myclassname)、ラベル セレクター (div、h1、p)、隣接セレクター (h1 + p)、子セレクター (
ul > li)、子孫セレクター (li
a)、ワイルドカード セレクター (*)、属性セレクター (a[rel="external"])、疑似クラス セレクター (a:hover、li:nth-child)継承可能なプロパティ: font-size、font-family、color
継承できないスタイル: ボーダー、パディング、マージン、幅、高さ
優先順位 (近接性原理): ! important > [ id > class > tag ] ! important はインラインよりも高い優先順位を持ちます
9.インタビューの質問: CSS 優先順位アルゴリズムを計算するにはどうすればよいですか?
要素セレクター: 1 クラス セレクター: 10 ID セレクター: 100 インライン スタイル: 1000
! important で宣言されたスタイルが最も優先されますが、競合する場合は再計算されます。
10. インタビューの質問: CSS を使用して三角形を描画する
幅と高さを 0 に設定し、ボーダー property.tran{ width: 0; height: 0; border-left: 50px ソリッドレッド; border-right: 50px ソリッドレッド; border-bottom: 100px ソリッド #000; }
11. インタビューの質問: 幅と高さを指定せずにボックスを水平方向と垂直方向の中央に配置するにはどうすればよいですか?
親要素は相対的に配置され、内部要素は絶対的に配置されます。ここでの親要素は body です。
原則: 幅と高さが定義されていない画像の上下左右の距離を 0 として、適応するためのマージンを与えます。これは、4 方向に同じ力を与える箱として想像でき、中央の位置に維持するために相対的にバランスの取れた力が形成されます。
.box1{
width: 200px;
height: 200px;
background-color: red;
position: relative;
.box2{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: #000;
}
}
12. 面接の質問: ディスプレイの価値は何ですか? その役割について説明してください。
block この要素は、この要素の前後に改行が入ったブロックレベルの要素として表示されます。
none この要素は表示されません。
inline-block インラインブロック要素。
list-item この要素はリストとして表示されます。
table この要素はブロックレベルのテーブルとして表示されます
継承は、表示属性の値が親要素から継承されることを指定します。
13. 面接の質問: BFC 仕様 (ブロック フォーマット コンテキスト) を理解していますか?
BFCとは何ですか? 浮動要素と絶対配置要素、非ブロック レベル ボックスのブロック レベル コンテナ (インライン ブロック、テーブル セル、テーブル
キャプションなど)、
およびオーバーフロー値が「表示されない」ブロック レベル ボックスは、新しい BFC (ブロック レベル フォーマット コンテキスト)。BFC には次のような特徴があります。 内部の Box は上から順に垂直方向に配置されます。ボックスの垂直距離はマージンによって決まります。同じ
BFC に属する 2 つの隣接するボックスのマージンは重なり合います。各要素のマージン ボックスの左側は、
それを含むブロック境界ボックスの左側に接します (左から右への書式設定の場合、それ以外の場合はその逆です)。これは浮きがあった場合にも当てはまります。BFC エリアはフロート ボックスと重なりません。BFC はページ上で独立した独立したコンテナであり、コンテナ内のサブ要素は外部の要素に影響を与えず、その逆も同様です。BFC の高さを計算するときは、浮動要素も計算に参加します。
BFCをトリガーするにはどうすればよいですか? float none 以外の値 overflow 表示以外の値
（hidden、auto、scroll） 表示
（table-cell、table-caption、inline-block、flex、inline-flex）以外の値 位置の
値（absolute、fixed）フィールドセット要素
14.インタビューの質問: フロートを解消する方法は何ですか?
1. 親要素にオーバーフローを追加します: hidden
3. Clear: を両方使用して float をクリアし、この属性をすべての float 要素の下に追加します。これにより、float の破壊性を排除できますが、不要なラベルが追加されます。
4. 疑似要素を使用してフロートをクリアします (推奨)
15.インタビューの質問: Web ページでは奇数番号または偶数番号のフォントを使用する必要がありますか?その理由は何ですか?
偶数を使用します。エンコードから解析まで多くの計算が必要になり、偶数は整数として計算するのが簡単ですが、奇数は割り算が難しい場合があり、小数を保持または破棄する必要があるためです。
16.インタビューの質問: CSS リセットとは何ですか?
HTML タグにはブラウザーのデフォルト スタイルがあり、ブラウザーごとにデフォルト スタイルが異なります。
開発中のブラウザのデフォルトのスタイルは、マルチブラウザの互換性の問題を引き起こし、開発効率に影響を与える可能性があります。ブラウザのデフォルトのスタイルをすべて最初から上書きします。
17.インタビューの質問: CSS スプライトとは何ですか?その利点と欠点は何ですか?
複数の小さな画像を 1 つの画像につなぎ合わせます。表示する背景パターンをbackground-positionと要素サイズで調整します。
アドバンテージ：
HTTP リクエストの数が減り、ページの読み込み速度が大幅に向上します。画像情報の繰り返しを増やし、圧縮率を向上させ、画像のサイズを縮小します。
スタイルの変更は簡単で、1 つまたは複数の写真の色やスタイルを変更するだけです。欠点:画像を結合できません。メンテナンスが面倒で、画像を修正すると画像全体のレイアウトやスタイルの再調整が必要になる場合があります。
18. インタビューの質問: 表示: なしと可視性: 非表示の違い。
1.display:none は完全に消えてドキュメント フロー内の場所を占めず、ブラウザは要素を解析しません。visibility:hidden は視覚的に消えます。これは、透明度 0 の効果として理解でき、場所を占めます。ドキュメント フロー ブラウザは要素を解析します。
2. パフォーマンスの点では、visibility:hidden を使用するほうが、display:none よりも優れています。display:none で可視性を切り替えると、ページがリフローします (ページ内の一部の要素のサイズ、レイアウト、表示、非表示などを変更する必要がある場合)。ページが再構築されます。これがリフローです。すべてのページは、初めて読み込まれるときにリフローを生成する必要があります) が、表示/非表示が切り替わる場合、リフローは発生しません。
19.位置の値は何ですか?その機能は何ですか?
静的 (デフォルト): 通常のドキュメント フローに従って配置します。相対 (相対位置決め): ドキュメント フローから切り離されず、上、下、左、右を通して位置決めするために独自の静的位置を参照します。絶対 (絶対位置決め) ): そうでない最も近い要素を参照します
static の親要素は
上、下、左、右を通して配置されます; 固定 (固定位置): 固定参照オブジェクトはビジュアル ウィンドウです
20. インタビューの質問: 不透明度と rgba の違い
rgba() と opacity は両方とも透明度を実現できますが、最大の違いは、opacity は要素と要素内のすべてのコンテンツの透明度に作用するのに対し、rgba() は要素の色またはその背景色にのみ作用することです。
Opacity は親要素の不透明度属性を継承しますが、RGBA セット要素の子孫要素は不透明度属性を継承しません。
1.3 JavaScript に関する基本的な面接の質問
21.インタビューの質問: JS の読み込みを遅らせる方法は何ですか?
JS の遅延読み込みはページ読み込み速度の向上に役立ちます
方法は大きく 6 つあります: defer 属性、async 属性、dom メソッドの動的作成、jquery の getScript メソッドの使用、setTimeout 遅延メソッドの使用、js の読み込みを最後に行う。
script src="test1.js" defer="defer"
script src="test1.js" async
$.getScript("outer.js",function(){
//回调函数，成功获取文件后执行的函数
console.log("脚本加载完成")
});
22.インタビューの質問: JS データ型とは何ですか?
単純なデータ型 (プリミティブ データ型とも呼ばれます):
未定義、Null、ブール、数値、および文字列。1—Object には複雑なデータ型もあります。Object は基本的に、順序付けられていない名前と値のペアのセットで構成されます。このうち、Unknown、Null、Boolean、Number はすべて基本型です。オブジェクト、配列、関数は参照型です
23. インタビューの質問: null と unknown の違い
null はオブジェクトがないこと、つまりそこに値があってはいけないことを意味します
1) 関数のパラメータとしては、関数のパラメータがオブジェクトではないことを意味します
2) オブジェクトプロトタイプチェーンのエンドポイントとして
未定義は値が欠落していることを示します。つまり、ここに値があるはずですが、値が定義されていません。
1) 仮パラメータは定義されているが、実パラメータが渡されておらず、未定義と表示される
2) オブジェクトの属性名が存在しない場合は、未定義と表示されます
3) 関数は戻り値を書き込まない、つまり return を書かず、何が得られるかは未定義です。
4) return を書き込みますが、値が割り当てられておらず、取得される内容は未定義です
Null と未定義は数値データ型に変換されます
null はデフォルトで 0 に変換されます
未定義はデフォルトで NaN に変換されます
24. 面接の質問: == と === の違いは何ですか
== 値の同一性をチェックし、型変換を許可します
=== 値と型の同一性をチェックし、型変換を許可しません
25. 面接の質問: JS のマイクロタスクとマクロタスク
setTimeout(function(){
console.log('1')
});
new Promise(function(resolve){
console.log('2');
resolve();
}).then(function(){
console.log('3')
});
console.log('4');
2 4 3 1
実行スタック上でマクロタスクを実行します。
実行中にマイクロタスクが発生した場合、そのマイクロタスクはマイクロタスク キューに追加されます。
現在のマクロタスクの実行が完了すると、マイクロタスクキュー内のタスクが直ちに実行されます。
現在のマイクロタスク キュー内のタスクが実行された後、レンダリングがチェックされ、GUI スレッドがレンダリングを引き継ぎます。
レンダリングが完了すると、js スレッドが引き継ぎ、次のイベント ループを開始し、次のマクロ タスク (イベント キューから取得された) を実行します。
マイクロタスク: process.nextTick、MutationObserver、Promise.then、最終的にキャッチ
マクロタスク: I/O、setTimeout、setInterval、setImmediate、requestAnimationFrame
26. 面接の質問: JS スコープ + このポインター + プロトタイプ テストの質問
27. インタビューの質問: 変数が JS の配列であるかどうかを判断するためにどのようなメソッドを作成できますか?
var ary = [1,23,4];
console.log(配列のインスタンス)//true;
var ary = [1,23,4];
console.log ( ary.proto.constructor配列);//true
console.log(ary.constructorArray)//true これら 2 つのコードは同じです
var 年 = [1,23,4];
function isArray(o) { return Object .prototype .toString .call(o) == '[オブジェクト配列] ' ; console.log (isArray(年));
28. インタビューの質問: スライスは何に使用されますか? スプライスは元の配列を変更しますか?
slice不会改变原数组
var arr=[1,2,3,4,5];
var arr2=arr.slice(1,3);
console.log(arr2);//[2,3]
console.log(arr);//[1,2,3,4,5]
splice会改变原数组
var arr=[1,2,3,4,5];
var arr1=arr.splice(1,3);
console.log(arr1);//[2,3,4]
console.log(arr);//[1,5]
29. インタビューの質問: JS 配列の重複排除
function dedupe(array){
return Array.from(new Set(array));
}
dedupe([1,1,2,3]) //[1,2,3]
30. 面接の質問: 新しいオペレーターは具体的に何をしますか?
new 演算子は、新しい空のオブジェクトを作成します。このオブジェクトのプロトタイプは、コンストラクターのプロトタイプを指します。このオブジェクトは、コンストラクターの実行後に返されます。
1. 空のオブジェクトを作成します
。 2. プロトタイプにリンクします
。 3. このポインターをバインドし、コンストラクターを実行します
。 4. オブジェクトが返されることを確認します。
1. 空のオブジェクトを作成します
var obj = new Object();
2. プロトタイプ チェーンを設定します (新しいインスタンスを作成するためにコンストラクターが呼び出されるとき、インスタンスには、そのプロトタイプ オブジェクトを指すポインター (内部プロパティ) が含まれます) constructor)
obj.proto= Func.prototype;
3. Func の this に obj をポイントさせ、Func の関数本体を実行します。(新しいオブジェクトを作成した後、コンストラクターのスコープを新しいオブジェクトに割り当てます (これにより、これは新しいオブジェクトを指します))
var result =Func.call(obj); 4. Func
の戻り値の型を決定します。
値型で、obj を返します。参照型の場合は、この参照型のオブジェクトを返します。
if (typeof(result) == “object”){
func=result;
}
else{
func=obj;;
}
31. インタビューの質問: 最後に
クロージャは、他の関数の内部変数を読み取ることができる関数です。
①関数の入れ子関数②関数外のパラメータや変数を関数内で参照可能
③パラメータや変数はガベージコレクション機構により再利用されません。
function f1(){
var n=999;
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
32. インタビューの質問: プロトタイプチェーン
1. プロトタイプ ① すべての参照型は proto (暗黙のプロトタイプ) 属性を持ち、その属性値は通常のオブジェクトです。 ② すべての関数は
プロトタイプ (プロトタイプ) 属性を持ち、その属性値は通常のオブジェクトです。 ③ すべての参照型のプロト属性はそのコンストラクターのプロトタイプを指しますvar a = [1,2,3]; a.proto === Array.prototype; // 真実
2. プロトタイプチェーン
オブジェクトの特定の属性にアクセスする場合、オブジェクト自体の属性を検索しますが、見つからない場合はそのプロトの暗黙のプロトタイプ、つまりコンストラクターのプロトタイプを検索します。見つからない場合はコンストラクタのプロトタイプのプロトタイプ内で検索するというように、階層ごとに上方向に検索していくことでチェーン構造が形成され、これをプロトタイプチェーンと呼びます。
33. インタビューの質問: JS 継承の方法は何ですか?
1. 构造函数继承
封装构造函数，通过new关键字创建实例对象；只有当一个函数以 new 关键字来调用的时候，我们才能说它是一个构造函数。
function Student(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
var s1 = new Student('张三', 11, 0)
var s2 = new Student('李四', 13, 1)
2.原型链继承
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.say = function() {
console.log('Hello');
};
var p1 = new Person('Tom', 18);
var p2 = new Person('Jack', 34);
console.log(p1.say === p2.say); // true
34. 面接の質問: call、apply、bind の違いを教えてください
JSでは関数のthisオブジェクトのポインティングを変更するためにこの3つを使いますが、それぞれの違いは何でしょうか？
違いについて説明する前に、3 つの類似点を要約しましょう。
1. これらはすべて、関数のこのオブジェクトのポインティングを変更するために使用されます。
2. 最初のパラメータは、this が指すオブジェクトです。
3. 後続のパラメータを使用してパラメータを渡すことができます。
var xw = {
name : "小王",
gender : "男",
age : 24,
say : function() {
alert(this.name + " , " + this.gender + " ,今年" + this.age);
}
}
var xh = {
name : "小红",
gender : "女",
age : 18
}
xw.say();
本身没什么好说的，显示的肯定是小王 ， 男 ， 今年24。
那么如何用xw的say方法来显示xh的数据呢。
对于call可以这样：
xw.say.call(xh); alert: 小红 , 女 ,今年18
复制代码
对于apply可以这样：
xw.say.apply(xh); alert: 小红 , 女 ,今年18
复制代码
而对于bind来说需要这样：
xw.say.bind(xh)(); alert: 小红 , 女 ,今年18
call和apply都是对函数的直接调用，而bind方法返回的仍然是一个函数，因此后面还需要 ()来进行调用才可以
var xw = {
name : "小王",
gender : "男",
age : 24,
say : function(school,grade) {
alert(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade);
}
}
var xh = {
name : "小红",
gender : "女",
age : 18
}
call后面的参数与say方法中是一一对应的，而apply的第二个参数是一个数组，数组中的元素是和say方法中一一对应的，这就是两者最大的区别。
可以看到say方法多了两个参数，我们通过call/apply的参数进行传参。
对于call来说是这样的
xw.say.call(xh,"实验小学","六年级");
复制代码
而对于apply来说是这样的
xw.say.apply(xh,["实验小学","六年级郑州牛皮癣医院"]);
复制代码
看到区别了吗，call后面的参数与say方法中是一一对应的，而apply的第二个参数是一个数组，数组中的元素是和say方法中一一对应的，这就是两者最大的区别。
那么bind怎么传参呢？它可以像call那样传参。
xw.say.bind(xh,"实验小学","六年级")();
35.インタビューの質問: ソートの背後にある原則は何ですか?
36. 面接の質問: 深いコピーと浅いコピー
浅いコピー: オブジェクト自体ではなく、オブジェクトへの参照のみをコピーします。
ディープ コピー: オブジェクトによって参照されるすべてのオブジェクトをコピーします。
//深拷贝
function deepClone(data) {
let _data = JSON.stringify(data),
dataClone = JSON.parse(_data);
return dataClone;
};
//测试
let arr = [1,2,3],
_arr = deepClone(arr);
arr[0] = 2;
console.log(arr,_arr)//[2,2,3] [1,2,3]
lodash 深拷贝
安装依赖
main.js导入
import _ form 'lodash'
Vue.prototype._=_
使用
const res = [{
name:'张三',age:38},{
name:'李四',age:25}];
this.res1= _.cloneDeep(res);
37. インタビューの質問: localstorage、sessionstorage、cookie の違い
Cookie: ログイン情報を保存します。たとえば、特定の Web サイト マーケットにログインすると、「パスワードを記憶する」と表示されます。これは、ユーザーの身元を識別するためのデータを Cookie に保存することによって実現されます。
sessionStorage: 現在のセッションのデータの一部を保存し、ページ データを更新できるセッション。まだ存在します。ただし、ページを閉じると、sessionStorage 内のデータは消去されます。
localStorage: HTML5 標準で新しく追加された技術です。もちろん、IE6 の時代には、ローカル ストレージに userData というものがありました。当時は、ブラウザの互換性を考慮して、より一般的な解決策は次のとおりでした。フラッシュを使用します。現在、localStorage はほとんどのブラウザでサポートされています。
1) 収納サイズ
Cookie: 通常は 4K 以下 (すべての http リクエストには Cookie が含まれるため、Cookie はセッション ID などの小さなデータの保存にのみ適しています)
セッションストレージ: 5M 以上
localStorage：5M以上 2) データ有効期間
Cookie: 通常、サーバーによって生成され、有効期限を設定できます。時間が設定されていない場合、Cookie はブラウザを閉じると期限切れになります。時間が設定されている場合、Cookie はハードディスクに保存され、期限切れになります。有効期限が切れた後。
sessionStorage: 現在のブラウザ ウィンドウを閉じるか、ページを閉じるか、ブラウザがクリアされるまでのみ有効です。
localStorage: 永続的に有効です。手動で永続的にクリアしない限り、ウィンドウまたはブラウザを閉じると常に保存されるため、永続的なデータとして使用されます。
アプリケーションシナリオクッキー：ユーザーがウェブサイトにログインしたかどうかを判断し、次回自動的にログインするか、パスワードを記憶し、イベント情報などを保存します。
sessionStorage: 機密性の高いアカウントのワンタイム ログイン。単一ページがより多く使用されます (sessionStorage は、
ページを開いたときに sessionStorage データが空であることを保証できます)localStorage: 長期ログイン (ユーザーがログインしているかどうかを判断するため) によく使用され、データをローカルに長期保存するのに適しています。
第 2 章 高度な面接の質問
2.1 ES6 面接の質問
38. 面接の質問: var、let、const の違い
var 宣言 変数は繰り返し宣言できますが、let は繰り返し宣言できません var はブロック レベルに制限されませんが、let はブロック レベルに制限されます var は
window にマッピングされ (プロパティはリンクされます)、let とは関連付けられませんwindow マッピング
var は宣言より上の変数にアクセスでき、let には一時記憶域のデッド ゾーンがあります。宣言より上の変数にアクセスするとエラーが報告されます。const 宣言を代入する必要がある後、それ以外の場合はエラーが報告されます。にはマッピングされません
。ウィンドウでは、ブロックレベルのスコープがサポートされており、宣言より上の変数にアクセスするとエラーが報告されます。
39.インタビューの質問: アロー関数と通常の関数の違いは何ですか?
1) アロー関数の場合、これはウィンドウではなく親を指します (ポインティングは変数です) (2) 引数オブジェクトは使用できません
(3) コンストラクターとして使用できません。つまり、新しいコマンド(4) yield コマンドが使用できないため、アロー関数をジェネレーター関数として使用できません
。1:書き方が違う
2: 通常の関数では変数昇格現象が発生します。
3: アロー関数はコンストラクタとして使用できません
４：この２点が異なります。
5: アロー関数の引数は、その親関数が配置されているスコープの引数を指します。
6: アロー関数には new.target がありません
40. 面接の質問: Promise には州がいくつありますか?
Promise の 3 つの状態:
保留中、履行済み、拒否 (未決定、履行済み、拒否) の状態は同時に 1 つだけ存在でき、一度状態が変化すると再度変更することはできません。Promise はコンストラクタです。Promise オブジェクトは、2 つの可能な結果 (成功または失敗) を持つタスクを表します。また、複数のコールバックを保持し、異なる結果が発生した場合には対応するコールバックを送信します。
1. 初期化、ステータス:保留中
2.解決(成功)呼び出し時、ステータス:保留中=>実現
3.拒否(失敗)呼び出し時、ステータス:保留中=>拒否