正しく判断する方法1. thisポイントを
一文の説明場合はthisポイント、それは次のようになります。それを呼び出す誰が、this誰を指すようになります。
正確に決定するために、次の順序でthisポイント。
1.地球環境this
- ブラウザ環境：（身体の任意の関数の外側）厳密モードであろうと、グローバル実行環境は、
thisグローバルオブジェクトを指しますwindow。 node環境：それは厳密なモードであるか否かを、グローバル実行環境（外側本体内の任意の文字）this} {空のオブジェクトです。
2.それがされているかどうかをnew結合
- それがされている場合は
new結合、およびコンストラクタは返さないfunctionかobject、そして、this新しいオブジェクトを指します。
次のように：
戻り値は、コンストラクタではありません
functionか、object
function Super(age) {
this.age = age;
}
let instance = new Super('26');
console.log(instance.age); //26
复制代码コンストラクタは、値を返す
functionか、objectこのケースでは、this返されたオブジェクトを指し
function Super(age) {
this.age = age;
let obj = { a: 2 };
return obj;
}
let instance = new Super('26');
console.log(instance.age); //undefined
复制代码これがそうである理由あなたは不思議に思うかもしれませんか？私たちは、見てnewの原則の実現：
- 新しいオブジェクトを作成します。
- この新しいオブジェクトは、プロトタイピングを実行されます
- プロパティとメソッドが追加され
this、参照されたオブジェクト、およびメソッドのコンストラクタを実装します - 関数は、他のオブジェクトが返されない場合は、どのような私は
this、この新しいオブジェクトに、またはポイントthisオブジェクトコンストラクタリターンに
//new是关键字 这里仅是说明new的过程
function new(func){
let target = {};
target.__proto__ = func.prototype;
let res = func.call(target);
//排除null的情况
if(res && typeof(res)=='object' || typeof(res)=='function'){
return res;
}
return target;
}
复制代码3.によって機能するかどうかcall、apply呼び出し、又は使用してbind結合し、そしてそうである場合、this結合は、標的結合[ディスプレイ]が指定されています
function info() {
console.log(this.age);
}
let person = {
age: 20,
info
}
let age = 28;
let myInfo = person.info;
myInfo.call(person); //20
myInfo.apply(person); //20
myInfo.bind(person)(); //20
复制代码1つの種類ことに留意すべきである特別な場合、もしcall、 applyまたはbind第1のパラメータ値が渡されるundefinedか、null厳密モード下でthisの着信値の値null/ undefined。非strictモード、実用的なアプリケーションのデフォルト結合規則、thisグローバルオブジェクト（node環境global、ブラウザ環境window）
function info() {
//node环境中：非严格模式 global，严格模式为null
//浏览器环境中：非严格模式window，严格模式为null
console.log(this);
console.log(this.age);
}
var person = {
age: 20,
info
}
var age = 28; //注意如果使用let声明结果？
var myInfo = person.info;
//严格模式抛出错误
//非严格模式，node输出为undefined（因为全局的age不会挂在global上）
//非严格模式，浏览器环境输出28（因为全局的age会挂在window上）
myInfo.call(null);
复制代码なお、もし
let非strictモード好みのブラウザ出力の宣言undefined現代のJavaScript変数のスコープの
4.暗黙結合、関数呼び出しがオブジェクトによってトリガされ、すなわち、呼のコンテキストオブジェクトの位置、の典型的な暗黙の呼び出しがありました。xxx.fn()
function info() {
console.log(this.age);
}
let person = {
age: 20,
info
}
let age = 28;
person.info(); //20,执行的是隐式绑定
复制代码5.デフォルトのバインディング、デフォルトのルールは、アプリケーションの他の結合ルールで使用することはできません、別の関数呼び出しを渡すようにしてみてください
非strictモード：node環境パフォーマンスのグローバルオブジェクトglobal、ブラウザ環境、グローバルオブジェクトの実装windowstrictモード：実行undefined
function info() {
console.log(this.age);
}
var age = 28;
//严格模式 抛错
//非严格模式 node下输出undefined（因为全局的age不会挂在global上）
//非严格模式 浏览器环境下输出28（因为全局的age不会挂在window上）
//严格模式抛错，因为this此时是undefined
info(); //28
复制代码もしことに注意
ageを介してlet宣言、出力されるundefinedことによってようにlet吊り下げに主張しないwindowオブジェクト
6.機能は矢印します
アロー機能が所有していないthis、コンテキストバインドの外層を継承しますthis
let obj = {
age: 20,
info: function () {
return () => {
console.log(this.age); //this继承的是外层上下文绑定的this
}
}
}
let person = { age: 28 };
let info = obj.info();
info(); //20
let info2 = obj.info.call(person);
info2(); //28
复制代码2. JSプリミティブ型ではあるのですか？nullこれは、オブジェクトのですか？プリミティブデータ型と複雑なデータ型の違いは何ですか？
現在、JSプリミティブ型、すなわち、6があります。
BooleanStringNumberUndefinedNullSymbol（ES6新）
複雑なデータ型の一種のみ：オブジェクト
nullにもかかわらずないオブジェクト、typeof null出力されobject、これは歴史的遺産、下部メモリ変数を使用するにかかわらず、情報の種類のパフォーマンスのための32ビットシステムを使用しての初期バージョンJS、代表オブジェクトの開始時000であるnullので、全てゼロとして表さそれは裁判官に間違っていますobject
基本データ型と複雑なデータ型の区別：
異なるの1.メモリ割り当て
- 基本データ型はスタックに格納されています
- スタック内の記憶変数に格納されている複合データ型は、スタック、ヒープへのアドレス参照であります
2.別のアクセスメカニズム
- 基本データ型は値でアクセス可能
- 参照によってアクセス可能な複合データ型、jsがオブジェクトにアクセスするとき、オブジェクトが最初にヒープメモリアドレスで得られるヒープメモリに直接アクセスオブジェクトは、このアドレスに応じてオブジェクトの値を取得することはできませ
3.異なる変数をコピーします
- 基本データ型：
a=b;れるb新しい変数に元の値のコピーを保存するために割り当てられa、aそしてb完全に独立し、補完的な影響 - 複合データ型：
a=b;bメモリの新しい変数に割り当てられたアドレス参照されるオブジェクトの保存a、aおよびb値が変更された同一のヒープメモリアドレスにポイントを、他にも変更されます。
let b = {
age: 10
}
let a = b;
a.age = 20;
console.log(b); //{age:20}
复制代码4.異なる送信パラメータ（引数/パラメータ）
、基本データ型の値がコピーされ、複雑なデータ型、参照アドレスのコピーである：伝達関数パラメータは、（内容がスタックに格納された）値によって渡され
//基本数据类型
let b = 10;
function change(info) {
info = 20;
}
//info=b;基本数据类型，拷贝的是值；复杂数据类型，拷贝的是引用地址
change(b);
console.log(b); //10
复制代码//复杂数据类型
let b = {
age: 10
}
function change(info) {
info.age = 20;
}
//info=b;拷贝的是地址的引用，修改互相影响
change(b)
console.log(b); //{age:20}
复制代码3. HTML5の意味を理解します
HTML5セマンティックは、以下のようなページ構造を作成するためのセマンティックタグを使用する正当な権利を指しheader、footer、nav、直感的にこのラベルの役割を知ることができるラベルではなく、虐待からdiv
セマンティックタグは以下のとおりです。
title：主に紹介ページヘッダ情報のために使用header：ヘッダー定義文書nav：主にページのナビゲーションに使用main：ドキュメントの規定の主な内容は、それが一意であるため、それが重複したコンテンツを含んでいてはならない書類は、徴候や検索フォームの停止、こうしたサイドバー、ナビゲーション、著作権情報として、文書に表示されます参照をarticle：独立した、自己完結型のコンテンツh1~h6：カスタムタイトルul：順不同リストの定義ol：順序付きリストの定義address：著者/所有者のドキュメントや記事を定義するための情報を連絡しますcanvas：画像を描画dialog：ダイアログボックスの定義や窓の確認aside：それは、コンテンツの外側に配置されている内容を定義します。<aside>記事のサイドバーコンテンツを使用することができますsection：ドキュメントのセクション（の定義のsectionような他の章、ヘッダ、フッタ、または文書などのセグメント）figure：別個のストリームコンテンツの規定（画像、図、写真、コード、等）。figureコンテンツ要素はメインコンテンツに関連する必要がありますが、それが削除された場合は、文書の流れに影響を与えるべきではありませんdetails：説明文書または文書の内容の特定の部分mark：マーク付きテキスト
作り方4 ( a==1 && a==2 && a==3 )の値をtrue
1.暗黙使用変換規則
==ときに一貫性のないデータ型についてのオペレータは最初の暗黙的な変換意志a==1 && a==2 && a==3基本的なデータ型の値があれば、不可能なことaであるnullかundefinedboolの種類、返すことはできませんtrue- だから、おそらく
a複雑なデータ型、もJs複雑なデータ型のみobjectリコールの下で、Object原始的にどのような方法を呼ばれるのですか？参照- あなたが展開する場合
[Symbol.toPrimitive]のインターフェイスをリターンが基本データ型でない場合は、エラーをスローし、このインタフェースを呼び出し、 - あなたが展開しない場合は
[Symbol.toPrimitive]インタフェースを、その後、必要な変換の種類に応じて、最初の呼び出しvalueOf/toString - プリミティブ値アルゴリズムたToPrimitiveにJavaScriptオブジェクトの移行
- あなたが展開する場合
let obj = {
[Symbol.toPrimitive](hint) {
console.log(hint);
return 10;
},
valueOf() {
console.log('valueOf');
return 20;
},
toString() {
console.log('toString');
return 'hello';
}
}
console.log(obj + 'tte'); //default
//如果没有部署[Symbol.toPrimitive]接口，调用顺序为valueOf -> toString
console.log(obj == 'tte'); //defalut
//如果没有部署[Symbol.toPrimitive]接口，调用顺序为valueOf -> toString
console.log(obj * 10); //number
//如果没有部署[Symbol.toPrimitive]接口，调用顺序为valueOf -> toString
console.log(Number(obj)); //number
//如果没有部署[Symbol.toPrimitive]接口，调用顺序为valueOf -> toString
console.log(String(obj)); //string
//如果没有部署[Symbol.toPrimitive]接口，调用顺序为toString -> valueOf
复制代码だから、この質問のために、限り[Symbol.toPrimitive]返される最初の時間のためのインターフェイスの値が1である、そしてそれが本当である、インクリメントします。
let a = {
[Symbol.toPrimitive]: (function (hint) {
let i = 1;
return function () {
return i++;
}
})()
}
console.log(a == 1 && a == 2 && a == 3);
复制代码呼び出しvalueOfインターフェースを：
let a = {
valueOf: (function () {
let i = 1;
return function () {
return i++;
}
})()
}
console.log(a == 1 && a == 2 && a == 3);
复制代码コール
toStringインタフェースの呼び出しvalueOfに類似
さらに、私の方法に加えてインクリメントされ、次のようにも、定期的に使用することができます。
let a = {
reg: /\d/g,
valueOf() {
return this.reg.exec(123)[0];
}
}
console.log(a == 1 && a == 2 && a == 3);
复制代码2.データのハイジャックを使用します
使用Object.defineProperty呼び出して、プロパティを取得するに定義されたプロパティをgetする方法を、私たちはこの機能を利用するwindow対象の定義aは次のようプロパティ：
let i = 1;
Object.defineProperty(window, 'a', {
get() {
return i++;
}
})
console.log(a == 1 && a == 2 && a == 3);
复制代码ES6追加されましたProxy、ここで使用することができProxy、次のように、達成するために：
let a = new Proxy({}, {
i: 1,
get() {
return () => this.i++
}
})
console.log(a == 1 && a == 2 && a == 3);
复制代码メソッドの配列を結合書き換え、3つの配列の配列を呼び出すメソッドToString・インタフェースのデフォルト値を結合
let a = [1, 2, 3];
a.join = a.shift;
console.log(a == 1 && a == 2 && a == 3);
复制代码キーワードで4.
let i = 0;
with ({
get a() {
return ++i;
}
}) {
console.log(a == 1 && a == 2 && a == 3);
}
复制代码5.手ぶれ補正（デバウンス）関数については何ですか？シナリオ、簡単な手ブレ補正機能は何ですか
防振機能の役割：
機能を実行するために一定時間内回数を制御するN秒以内に再度トリガ場合、関数は一度だけ実行され、その後、安定化の遅延時間を再計算は、N秒を意味します。
画像安定化シナリオ：
- ユーザーが停止した場合、ユーザは、サーバ・インタフェースを要求するために呼び出しておく必要がないため、入力され、他方の入力された場合は、検索クエリボックスを入力し、適切な時間間隔を設定するために呼び出す、効果的にサーバーの負荷を軽減
- フォームバリデーション
- イベントを提出するボタン
- ブラウザのウィンドウスケーリング、
resizeイベントなど
手ぶれ補正機能は、達成するために：
/**
*
* @param {*} func 要执行的函数
* @param {*} wait 延迟时间 毫秒
* @param {*} immediate true 表示开始会立即触发一次 false 表示最后一次一定会触发
*/
function debounce(func, wait, immediate = true) {
let timeout, context, args;
//延迟执行函数
const later = () => setTimeout(() => {
//延迟函数执行完毕，清空定时器
timeout = null;
//延迟执行的情况下，函数会在延迟函数中执行
//使用到之前缓存的参数和上下文
if (!immediate) {
func.apply(context, args);
context = args = null;
}
}, wait);
let debounced = (...params) => {
if (!timeout) {
timeout = later();
if (immediate) {
//立即执行
func.apply(this, params);
} else {
//闭包
context = this;
args = params;
}
} else {
//连续点击从头开始计算延迟时间
clearTimeout(timeout);
timeout = later();
}
}
debounced.cancel = () => {
clearTimeout(timeout);
timeout = null;
}
return debounced;
}
复制代码ます。https：//juejin.im/post/5cec95fb5188251e030fe48bで再現