jslang求職シリーズ-JavaScript変数

15046 ワード

先端面接試験職を求める javascript

ディレクトリ
振り回さない先端は、塩魚とどう違いますか?
目次
ディレクトリ
二var/let/const
三一時性死区
四関数スコープとブロックレベルのスコープ
五変数の昇格と関数の昇格
5.1詳細解説：変数の昇格、関数の昇格と一時的なデッドタイム;
5.2テーマ1;
5.3テーマ2;
5.4タイトル3;
5.5テーマ4;
5.6タイトル5;
六判定変数
6.1 typeof;
6.2 instance of;
6.3 constructor;
6.4 Aray.prototype.toString.call;
七参考文献
二var/let/const
目次に戻ります

var:

varは、ステートメントを繰り返しても良い.

作用領域:グローバルスコープと関数スコープ

は、前解析

を行うことができます.

let:

統合されたスコープでは、ステートメントを繰り返すことはできません.

作用領域:グローバルスコープおよびブロックレベルスコープ{}

は、前解析を行わない

letとvarとの比較:

varによって宣言された変数は、グローバルまたは関数ブロック全体の

だけである.

letは、作用領域においてブロックレベルに制限されている変数、ステートメントまたは表現(ブロックレベル作用領域)

を宣言することを可能にする.

letは、ステートメントを繰り返すことができません.

let臨時デッドゾーン

が存在します.

let`は前解析されない

const:

letにもあります.

もあります.

初期化は、

を与えなければならない.

割当後はタイプを変更できません.

三一時性死区
目次に戻ります
ブロックレベルのスコープ内にlet/constコマンドが存在する限り、宣言された変数はこの領域を結合し、外部の影響を受けない.
コードブロック内でlet/constを使用して変数を宣言する前に、この変数はすべて利用できないので、「一時的なデッドゾーン」と呼ばれます.
テーマを見ます
次のコードは何を出力しますか?

let a = 1;
let test = function() {
  console.log(a);
  a++;
}
test();

次のコードは何を出力しますか?

let a = 1;
let test = function() {
  console.log(a);
  let a = 2;
  a++;
}
test();

第一問出力:1第二問出力:Uncaught ReferenceError: Cannot access 'a' before initializationその理由は、同じblockにおいて、letが後に再定義されたので、前に変数を参照することができないからである.また、入れ子外層の値も取れません.
四関数スコープとブロックレベルのスコープ
目次に戻ります

関数スコープ:JavaScriptで関数を定義します.関数内部の変数は関数内部のみにアクセスできます.外部変数を変更して影響します.

ブロックレベルの作用領域:変数は定義されたブロックレベルのコードを残した直後に回収され、一時的なデッドゾーンが存在する.

ES 5にはグローバルスコープと関数スコープだけがあり、ブロックレベルのスコープがないので、これは少し迷惑をかけます.

内層変数カバー外層変数

サイクルの変数がグローバル変数

に漏れました.
内層変数が外層変数をカバーする

var tmp = new Date();

function f(){
  console.log(tmp);
  if(false){
    var tmp = "hello";
  }
}

f(); // undefined

ループの変数がグローバル変数に漏れました.

for (var i = 0; i < 3; i++) {

}
console.log(i); // 3

varによって宣言された変数または非厳密モードで作成された関数宣言には、ブロックレベルの作用領域がない.

var x = 1;
{
  var x = 2;
}
console.log(x); // 2

したがって、この問題を解決するために、ES 6はブロックレベルの作用領域を追加した:

ブロックのステートメントは、ゼロまたは複数のステートメントを組み合わせるために使用され、このブロックは、ペアの大かっこ{}によって規定される.

ES 5ブロックレベルのスコープを形成する方法

(function() {

})()

ES 6は｛｝で定義されている.

{
  var x = 1; //    const x = 1;
}

五変数の昇格と関数の昇格
目次に戻ります
なぜ変数の昇格と関数の昇格を行ったのかについては、この問題は明確な答えがないままです.
関数アップとは、相互再帰的な問題を解決するために、基本的に下から順に問題を解決することです.

//     
function isEven(n) {
  if (n === 0) {
    return true;
  }
  return isOdd(n - 1);
}

console.log(isEven(2)); // true

//     
function isOdd(n) {
  if (n === 0) {
    return false;
  }
  return isEven(n - 1);
}

関数が向上していない場合は、下から順にisEven関数が呼び出されたときに、isOdd関数はまだ宣言されていないので、isEven内部でisOdd関数を呼び出すことができない.
変数が上昇したため、ここではよく分かりません.答えは「このように設計されています」です.
5.1詳細解説:変数の昇格、関数の昇格と一時的なデッドタイム
目次に戻ります
では、変数アップはどうなりますか?

console.log(a);

var a = 10;

このシナリオでは、undefinedが出力されますが、なぜですか?

var a;

console.log(10);

a = 10;

上のコードを見ると、JavaScript解析の過程でaを上に抽出して声明します.console.log(a)は印刷する時、aは宣言したが、値を記入していないので、undefinedです.
このコードはletまたはconst文に変換されますか?一時的に死地が現れます.

console.log(a);

let a = 10;

出力:

VM196:1 Uncaught ReferenceError: Cannot access 'a' before initialization

OK、以下は変数の昇格と一時的なデッドタイムのまとめを行います.

は、varによって定義された変数の前で印刷され、変数が向上したので、undefined

を印刷することができる.

は、let、constで定義されている変数の前で印刷します.一時的に不感があるため、エラーが発生します.

関数を見てください.

var foo = 3;

function getFoo() {
  var foo = foo || 5;
  console.log(foo); //    5
}

getFoo();

一言を覚えてください

関数は一等公民

です.
したがって、上のコードは、JavaScript解析になります.

function getFoo() {
  var foo;
  foo = foo || 5;
  console.log(foo);
}

var foo;
foo = 3;

getFoo();

ほら、これは関数アップです.
5.2テーマ1
目次に戻ります

function getFoo() {
  foo();

  var foo = function() {
    console.log(1);
  }

  foo();

  function foo() {
    console.log(2);
  }

  foo();
}
getFoo();

上のコードは何を出力しますか?

2
1
1

これを変数と関数に変えてアップグレードした効果が分かります.

function getFoo() {
  var foo;

  function foo() {
    console.log(2);
  }

  foo(); // 2

  foo = function() {
    console.log(1);
  }

  foo(); // 1

  foo(); // 1
}
getFoo();

5.3テーマ2
目次に戻ります

console.log(a);

var a = 10;
var a = 100;

console.log(a);

function a() {
  console.log('a');
}
function a() {
  console.log('aa');
}

a();

上のコードは何を出力しますか?
答え:

[Function: a]
100
100

5.4タイトル3
目次に戻ります

var a = 1;
function b() {
  a = 10;
  return;
  function a() {}
}
b();
console.log(a);

上のコードは何を出力しますか?
3いいえ、大丈夫です
5.5テーマ4
目次に戻ります

function foo() {
  function bar() {
    return 3;
  }
  return bar();
  function bar() {
    return 8;
  }
}
console.log(foo());

上のコードは何を出力しますか?
答え:8
5.6タイトル5
目次に戻ります

var foo = { n: 1 };

(function(foo) {
  console.log(foo.n);
  foo.n = 3;
  foo = { n: 2 };
  console.log(foo.n);
})(foo)

console.log(foo.n);

上のコードは何を出力しますか?

A:1 2

B:undefined 2 1

C:エラー

D:1 2

答え:

var foo = { n: 1 };
(function(foo){            //    foo     foo            ，       n     1
    var foo;               //        ，  。
    console.log(foo.n);    //    1
    foo.n = 3;             //       foo           n       3
    foo = { n: 2 };        //    foo          ，   n     2.
    console.log(foo.n);    //           n   
})(foo);
console.log(foo.n);        //    foo             ，    n     3.

六判定変数
目次に戻ります
JavaScriptは変数を判断する方法があります.

typeof(variable)

variable instanceof Array

variable.constructor = Array

Object.prototype.toString.call(variable)

どのような違いがありますか?
6.1 typeof
目次に戻ります

var num = 123;
var str = 'abcdef';
var bool = true;
var arr = [1, 2, 3, 4];
var json = { name: 'jsliang', age: 25 };
var func = function () { console.log('this is function'); }
var und = undefined;
var nul = null;
var date = new Date();
var reg = /^[a-zA-Z]{5,20}$/;
var error = new Error();

console.log(
  typeof num, // number
  typeof str, // string
  typeof bool, // boolean
  typeof arr, // object
  typeof json, // object
  typeof func, // function
  typeof und, // undefined
  typeof nul, // object
  typeof date, // object
  typeof reg, // object
  typeof error, // object
);

typeofで区別できるのは、

number

string

boolean

undefined

function

他のタイプを検出するとobjectに戻り、不安定です.
追加:

typeof NaN; // number
typeof 10n; // bigint
typeof Symbol(); // symbol

NaNはnumber

に戻る.

10nはBigIntの表示方法であり、数字の後にnを追加してBigIntを表すか、BigInt(10)を追加しても同じである.

Symbol()はSymbol

です.
6.2 instance of
目次に戻りますinstanceofはプロトタイプチェーンの指向性を判断します.その実現原理を見てもいいです.

function instanceOf(a, b) {
  //    typeof       
  if (typeof a !== 'object' || b === null) {
    return false;
  }

  // getPrototypeOf   Object        
  //            
  let proto = Object.getPrototypeOf(a);
  const prototype = b.prototype;

  //     __proto__     
  while (proto) {
    
    //      null      ，   false
    if (proto === null) {
      return false;
    }

    //    a.__proto__.xxx === b.prototype，   true
    if (proto === prototype) {
      return true;
    }

    //      
    proto = proto.__proto__;
  }
}

instanceofはプロトタイプチェーンの検索プロセスである.

var num = 123;
var str = 'abcdef';
var bool = true;
var arr = [1, 2, 3, 4];
var json = { name: 'jsliang', age: 25 };
var func = function () { console.log('this is function'); }
var und = undefined;
var nul = null;
var date = new Date();
var reg = /^[a-zA-Z]{5,20}$/;
var error = new Error();

console.log(
  num instanceof Number, // false
  str instanceof String, // false
  bool instanceof Boolean, // false
  und instanceof Object, // false
  nul instanceof Object, // false
  arr instanceof Array, // true
  json instanceof Object, // true
  func instanceof Function, // true
  date instanceof Date, // true
  reg instanceof RegExp, // true
  error instanceof Error, // true
)

保険のため、instanceofで判断できるのは:

Array

Function

Date

RegExp

Error

他のものはあまり確定できません.
6.3 constructor
目次に戻ります

var num = 123;
var str = 'abcdef';
var bool = true;
var arr = [1, 2, 3, 4];
var json = { name: 'jsliang', age: 25 };
var func = function () { console.log('this is function'); }
var und = undefined;
var nul = null;
var date = new Date();
var reg = /^[a-zA-Z]{5,20}$/;
var error = new Error();

function Person(){

}
var Tom = new Person();

console.log(
  Tom.constructor === Person,
  num.constructor === Number,
  str.constructor === String,
  bool.constructor === Boolean,
  arr.constructor === Array,
  json.constructor === Object,
  func.constructor === Function,
  date.constructor === Date,
  reg.constructor === RegExp,
  error.constructor === Error
);

得られたすべての結果はtrueであり、undefinedおよびnullを除いて、他のタイプは基本的にconstructorによって判断され得る.
ただし、constructorの属性は修正可能であるため、検出された結果が不正になる可能性がある.
6.4 Aray.prototype.toString.call
目次に戻ります

var num = 123;
var str = 'abcdef';
var bool = true;
var arr = [1, 2, 3, 4];
var json = { name: 'jsliang', age: 25 };
var func = function () { console.log('this is function'); }
var und = undefined;
var nul = null;
var date = new Date();
var reg = /^[a-zA-Z]{5,20}$/;
var error = new Error();

console.log(
  Object.prototype.toString.call(num), // [object Number]
  Object.prototype.toString.call(str), // [object String]
  Object.prototype.toString.call(bool), // [object Boolean]
  Object.prototype.toString.call(arr), // [object Array]
  Object.prototype.toString.call(json), // [object Object]
  Object.prototype.toString.call(func), // [object Function]
  Object.prototype.toString.call(und), // [object Undefined]
  Object.prototype.toString.call(nul), // [object Null]
  Object.prototype.toString.call(date), // [object Date]
  Object.prototype.toString.call(reg), // [object RegExp]
  Object.prototype.toString.call(error), // [object Error]
);

完璧な判断方法は、上記のすべてのタイプを検出することができ、その結果をresult.slice(8, -1)だけで具体的なタイプを得ることができる.
七参考文献
目次に戻ります

[x]JavaScript：変数アップと関数アップ【読書アドバイス:10 min】

[x]変数の昇格に注意しなければならない問題【読書アドバイス:5 min】

[x]筆記試験問題-Js先端変数の引き上げの問題【読書アドバイス:5 min】

[x]JS変数の昇格に関するいくつかのピット【読書アドバイス:5 min】

[x]JSにおける変数タイプの判断【読書アドバイス:10 min】

[x]jsのブロックレベルのスコープと関数スコープの違いは何ですか？（コード解析）【読書アドバイス:5 min】

jslangの文書庫は
高く険しい山採用
知識共有署名-非商業的使用-同じ方法で4.0国際許諾協議を共有する。は許可を行う.ベース
https://github.com/LiangJunrong/document-library上の作品.本許諾契約の授権以外の使用権限は、
https://creativecommons.org/licenses/by-nc-sa/2.5/cn/で獲得した.

jsカスタムオブジェクトを作成するいくつかの方法