jsの中のいくつかの変数の操作に対する理解

ここでは主に関数宣言と変数宣言が向上することを確認します.変数宣言、モザイク宣言と関数宣言の前後関係.大域作用域と局所作用域などの問題
jsでは、関数の変数操作について以下の点に注意が必要です.
1、jsの中で、関数は一つのスコープに相当します.
2、jsにおいて、関数宣言と変数宣言は共に向上させる作用があります.即ち、彼らの一番近い作用域の頭部に引き上げられます.変数宣言は、彼の一番近い作用領域の頭に変数を宣言するだけで、本当に定義されているところに割り当てられます.
3、関数がパラメータを渡す必要がある場合、パラメータは値伝達の形(すなわち関数内部で一般変数の値を変え、関数問でその変数にアクセスするか、変数の値は関数外で定義される値)です.
4、jsでは、var宣言により連続的に値を割り当て、第一の変数を除いて、他の変数は大域変数として定義されます.例えば、

var a=b=c=10;

aは局所変数で、bとcはグローバル変数です.
5、jsでは、varを通じて変数を宣言しないで、直接変数に値を割り当てます.変数をグローバル変数として定義するのに相当します.

a=10;

6、一つの作用領域において、変数の声明の順序、変数宣言=>関数の形参声明=>関数の声明は先着順である.
主にグローバル変数と局所変数の違い、連続した割当値の影響を理解します.

  1
var a = b = c = 10;      //b c     
(function(){
     
	var a = b = c = 20;    //      ，a    ，b c    ，   b c       b c  ,a      a  
})();
console.log('a: '+a);  //a: 10  ，       a  
console.log('b: '+b);  //b: 20  
console.log('c: '+c);  //c: 20  
 
 
//  2
var a = b = c = 10;    //b c    
(function(){
     
	a = b = c = 20; //      a,b,c    
})();
console.log('a: '+a);  //a: 20
console.log('b: '+b); //b: 20
console.log('c: '+c); //c: 20
 
 
  3
(function(){
     
	var a = b = c = 20;   //a     ，b c     
})();
console.log('b: '+b); //b: 20
console.log('c: '+c); //c: 20
console.log('a: '+a); //ReferenceError: a is not defined    a     ，        a，    
 
 
  4
(function(){
     
   a = b = c = 20;  //a,b,c      
})();
console.log('a: '+a); //a: 20
console.log('b: '+b); //b ：20
console.log('c: '+c);  //c: 20

変数宣言はアップグレードされます.

//   1
var a = 10;
(function(){
     
    console.log(a);     //undefined
    var a = 100;        //       ，      2  
})();
 
//   2
var a = 10;
(function(){
     
    var a;
    console.log(a);     //undefined
    a = 100;
})();
 
//   3
var a = 10;
(function(){
     
	
    console.log(a);     //undefined
    var a =100;        //a    ，      a  
})();
console.log(a);        //10
 
//   4
var a = 10;
(function(){
     
 
    console.log(a);     //10
    a =100;            //   a    ，    a  
})();
console.log(a);        //100

連続した割り当て、関数宣言は、変数宣言、関数パラメータ宣言の順序を上げます.

//   1                   2
a();           //1,      
 
 
var a = c = function() {
      //         ，          ，   a         a
    console.log(2)
}
 
 
a();                //2            a  
 
 
function a() {
     
    console.log(1)
}
 
 
a();                //2            a  
(function(b) {
     
    b(), c();      // 2  2  b   a  c         c
 
 
    var b = c = function a() {
      //         b，       ，   var    c    ，        c    
        console.log(3)
    }
 
 
    b();        //3，        b
})(a);
 
 
c()            //3 
 
 
//   2
var a；
function a() {
     
    console.log(1)
}
a();           //1,      
 
 
a = c = function() {
      //         ，          ，   a         a
    console.log(2)
}
 
 
a();                //2            a  
 
 
 
 
a();                //2            a  
(function(b) {
     
    b(), c();      // 2  2  b   a  c         c
 
 
    var b = c = function a() {
      //         b，       ，   var    c    ，        c    
        console.log(3)
    }
 
 
    b();        //3，        b
})(a);
 
 
c()            //3 

var A = function() {
     }
A.prototype.n = 1;
 
var b = new A()  
 
A.prototype = {
     
    n: 2,     //    A    ，A         ，  b c             
    m: 3
}
 
var c = new A()
console.log(b.n, b.m, c.n, c.m)  //1  undefined  2  3

次の例を比較する.

var A = function() {
     }  
A.prototype.n = 1;  
  
var b = new A()    
A.prototype.n=2
A.prototype.m=3
  
  
var c = new A()  
console.log(b.n, b.m, c.n, c.m)  //2 3  2  3  

関数宣言の昇格、同名の場合は、前の定義を上書きします.

//   1
(function f() {
     
    function f() {
     
        return 1;
    }
    console.log(f());  //2
 
 
    function f() {
     
        return 2;
    }
})();
 
 
//   2
(function f() {
     
    function f() {
     
        return 1;
    }
 
 
    function f() {
      //             f  
        return 2;
    }
 
 
    console.log(f());  //2
})();

変数宣言の昇格は、ifの前にvar aを書くのに相当します.これまでの文書の対象はwindowオブジェクトですので、aはwindowオブジェクトの中の一つの属性ですので、undefinedとして出力します.

//   1                  2
if (!(a in window)) {
     
    var a = 1;
}
console.log(a)   //undefined
 
 
//   2
var a；
if (!(a in window)) {
     
     a = 1;
}
console.log(a)   //undefined

var宣言の変数名と関数名は同じです.関数宣言と変数宣言は昇格され、順序があります.変数宣言="関数宣言です.

//   1                     2
function a() {
     }
var a;
console.log(typeof a)  //function      ：    =》    
a =10;
console.log(a); //10  ,   a    a    ，   a    number
 
 
//   2
var a;
function a() {
     }
console.log(typeof a)  //function      ：    =》    
a =10;
console.log(a); //10  ,   a    a    ，   a    number
 
 
//   3
var a;
function a() {
     }
console.log(typeof a)  //function      ：    =》    
a =10;
console.log(a); //10  ,   a    a    ，   a    number

var宣言の変数と関数のパラメータ名は同じです.宣言の順序:変数宣言=>関数のパラメータ

//   1            2  
(function(b) {
     
    console.log(b)  //1
    var b = c = 2
    console.log(b)  //2
})(1)
 
 
//   1
(function(b) {
     
	var b;
    console.log(b)  //1
    b = c = 2
    console.log(b)  //2
})(1)

var宣言の変数、関数のパラメータ名、関数名は同じです.宣言の順序:変数宣言="パラメータ宣言="関数宣言

//   1          2
(function(b) {
     
    console.log(b)   //[Function: b]
    var b = c = 2
    console.log(b)   // 2
 
 
    function b() {
     
    	console.log('thie is b function');
    }
    console.log(b)  //2
})(1)
 
 
//   2
(function(b) {
     
	var b;
	b = b; //   b   1，   b=1
	function b() {
     
    	console.log('thie is b function');
    }
    console.log(b)   //[Function: b]
    b = c = 2;
    console.log(b)   // 2
    console.log(b)  //2
})(1)

参と不参の違い

//   1
var a = 1
 
 
function c(a, b) {
     
    console.log(a)      //undefined，  c()     ，     ，        undefined
    a = 2
    console.log(a)     //2
}
c()
 
 
//  2
var a = 1
 
 
function c(a, b) {
     
    console.log(a)      //undefined，  c()     ，     ，        undefined
    a = 2
    console.log(a)     //2，   a     ，               
}
c()
console.log(a)   //1
 
 
//   3
var a = 1
 
 
function c(a, b) {
     
    console.log(a)    //1 //c(1)       1，  a  
    a = 2
    console.log(a)    //2
}
c(1)

関数宣言がアップグレードされ、同名の場合は、前のものを上書きします.

//   1               2
function fn(){
     
    function a(){
     console.log(1)}
    return a;
    function a(){
     console.log(2)}
}
fn()();//2
 
 
//   2
function fn(){
     
    function a(){
     console.log(1)}
    function a(){
     console.log(2)}
    return a;
}
fn()();//2

変数宣言の昇格

//   1            2
var a=10;
function fn(){
     
    //      ，a   undefined，       a    ，     !a     !undefined，  true，    a=20;
    //     a    20 ，js       ！！     js    ，    
    if (!a) {
     
        var a=20
    }
    console.log(a)//     20 ，
}
fn()  //20
 
 
//   2
var a=10;
function fn(){
     
    //      ，a   undefined，       a    ，     !a     !undefined，  true，    a=20;
    //     a    20 ，js       ！！     js    ，    
    var a;
    if (!a) {
     
        a=20；
    }
    console.log(a)//     20 ，
}
fn()   //20

上のものを変えたら

var a=10;
function fn(){
     
 
    if (!a) {
     
         a=20
    }
    console.log(a)//     10 ，
}
fn()  //10

コンマ演算子を理解し、左から右へ計算し、一番右の結果を返します.

// 1
function count(){
     
	return 1,2,3;
}
console.log(count()); //3
 
// 2
function count(){
     
	return (1,2,3);
}
console.log(count());  //3
 
// 3
function count(){
     
	return (1+1,2+3,3+1);
}
console.log(count()); //4

thisの作用領域を理解する.thisは常にプログラムの現在使用中のオブジェクトを指します.thisは関数内にのみ使用されます.
全体関数のthis:常にwindowオブジェクトを指します.
オブジェクトのthis:メソッドを呼び出すオブジェクト、
コンストラクタのthis:新規作成したオブジェクトを指します.
全体関数のthis:常にwindowオブジェクトを指します.

//   1
//       this  window
var a=100;
function fun(){
     
	console.log(this.a);//window.a    100
}
fun();
 
//   2
var n=100;
function fun1(n){
     
	//                
	n=10;         //     ，              ，       n  
	console.log(this.n);//  this.n=window.n   100
}
fun1(n);
 
//   3
var n=100;
function fun1(n){
     
	n++;                    //     
	console.log(this.n);   // this.n=window.n   100
}
fun1(n);  //100
 
//   4
var n=100;
function fun1(n){
     
	this.n++;       //  this.n=window.n
	console.log(this.n);//this.n=window.n    101
}
fun1(n);

オブジェクトのthis:メソッドを呼び出すオブジェクトを常に指します.

//   1
var name="li ming";
var hmm ={
     
	name:"zhang san",
	show:function(){
     
		console.log(this);//this=hmm    ，  {name: "zhang san", show: ƒ}
	} 
};
hmm.show();  //{name: "zhang san", show: ƒ}
 
//   2
var name="li ming";
var hmm={
     
	name:"zhang san",
	show:function(){
     
		console.log(this.name);//this.name = hmm.name，zhang san
	}
};
hmm.show();//zhang san
 
//   3
var a=10;
var foo={
     
	a:20,
	bar:function(){
     
 	var a=30;
 	return this.a; //this.a=foo.a，20
	}
}
console.log(foo.bar());  //20

コンストラクタのthis:新規作成したオブジェクトを指します.

function Student(name){
     
	this.name=name;
	console.log(this); //this   new        Student
}
var name1 = new Student("zhang san"); //Student {name: "zhang san"}
var name2 = new Student("li si");  //Student {name: "li si"}
 
var name="liming";
function Student(name){
     
	this.name = name;
	console.log(this.name); //this   new        Student
}
var name1 = new Student("zhang san"); //zhang san
var name2 = new Student("li si");  //li si

この栗を理解してください.

var a=10;
var foo = {
     
    a: 20,  //    
    bar: function () {
     
        var a = 30;     //    ，       a  
        return this.a;  //this          
    }
};
 
console.log(
    foo.bar(),             // 20,foo  bar  ，this  foo，foo  
                           //   a,  this.a = foo.a
    (foo.bar)(),           // 20,foo.bar     ， ()       
                           //，this        ，         
                           // foo         ,  this.a  foo.a
    (foo.bar = foo.bar)(), // 10    '='    ，       this   ，                foo.bar，  foo.bar            ，  （）  ，this     a，     var b= foo.bar;b()
    (foo.bar, foo.bar)()   // 10，     ，      ，       ， '='，   this    ，    
);

コード1とコード2の違いは、変数名と同名の関数が1つ以上あるだけで、関数宣言が向上しますので、関数a()の宣言は関数b()の一番前にあります.そして、この関数に新たに10を割り当てます.関数b()の外はb()の中で定義されているaにアクセスできません.

//   1
var a = 1;
function b(){
     
	a = 10;
	return;
 
 
	function a(){
                 //        b()   ,           2
		console.log(a);
	}
	
}
b();
console.log(a);   // 1
 
//   2
var a = 1;
function b(){
     
 
	function a(){
                 
		console.log(a);
	}
 
	a = 10;    //   a   ，    b()       a  ，
	           //  ，          ，       ， 
	           //  b()    a，        b()   a，   a          ，  b()       a
	return;	
}
b();
console.log(a);   // 1，         b()  a
 
//   3
var a = 1;
function b(){
     
	a = 10; //   b()   ，       a，   b()   a
	        //，        b()  a    
	return;
 
 
	// function a(){   //    a
	// 	console.log(a);
	// }
	
}
b();
console.log(a);   //10

グローバル変数とローカル変数を理解するか?

//   1
var a=b = 10;            //b    
(function(){
     
	var  b = 20;   //      b，b     ，       b  
})();
console.log(a);        //10
console.log(b);       //10       b  
 
 
//   2
var a=b = 10;      //b    
(function(){
            
   b = 20;         // b    
})();
console.log(a);   //10
console.log(b);   //20
 
 
//   3
var b = 10;       
(function(){
     
	var  a=b = 20;  //a    ，b    ，  b       b  
})();
console.log(b);   //20
console.log(a);   //    ReferenceError: a is not defined
 
 
//   4
var a = 10;   
var b =10;
(function(){
     
	var  a=20     //a   b     ，       a,b  
	var b = 20;
})(); 
console.log(b);  //10   a b         
console.log(a);  //10

連続実行

function fun(n,o){
     
    console.log(o);
    return {
     
        fun:function(m){
     
            return fun(m,n);
        }
    };
 }
 
 var a = fun(0);   a.fun(1);   a.fun(2);  a.fun(3);
 var b = fun(0).fun(1).fun(2).fun(3);
 var c = fun(0).fun(1);  c.fun(2);  c.fun(3);
 
 // :  a,b,c        ？
var a = fun(0);   a.fun(1);   a.fun(2);  a.fun(3);
//undefined  0  0  0
 
var b = fun(0).fun(1).fun(2).fun(3);
//undefined  0  1  2
 
var c = fun(0).fun(1);  c.fun(2);  c.fun(3);
//undefined  0  1  1

jsオブジェクトの私有属性、公有属性、静的属性、this指向、関数宣言、変数宣言の向上、演算子優先度を理解する

<!DOCTYPE html>
<html lang="en">
<body>
  <script type="text/javascript">
            var getName;
 
            function Foo (){
       
                getName = function (){
       
                     console.log(1);  
                };  
                return this;  
            }  
 
            function getName (){
       
              console.log(5);  
            }; 
              
            Foo.getName = function (){
       
               console.log(2);  
            };  
              
            Foo.prototype.getName = function () {
       
              console.log(3);  
            };  
              
            getName = function (){
       
              console.log(4);  
            };  
             
              
            Foo.getName();   //2
            getName();     //4
            Foo().getName();   //1
            getName();   //1
            new Foo.getName();  //2
            new Foo().getName();  //3
            new new Foo().getName(); //3
      </script>
</body>
</html>