let&const&原型链的理解

一、let

let 是用来声明变量,类似var,但是其声明的变量,只在声明的代码块内有效。并且不允许在相同作用域内,重复声明同一个变量;也不能在函数内部重新声明参数。

for(let i =0;i<3;i++){
     let tempObj = {
         name:'tom'
     }
     //let tempObj = {} //SyntaxError: Identifier 'tempObj' has already been declared
     var tempArr = [23]
 }
console.log(tempObj)  //tempObj is not defined
console.log(tempArr)  //[23]

let命令所声明的变量一定要在声明后使用,否则报错。
var命令会发生“变量提升”现象,即变量可以在声明之前使用,值为undefined。

console.log(a); // 输出undefined
 var a= 2;
​
 console.log(b); // 报错ReferenceError
 let b= 2;

在块级作用域内部的声明函数,建议不要使用函数声明语句;优先使用函数表达式。

    因为函数声明类似于var命令,会发生变量提升。即把函数声明提升到其所在的块级作用域的头部。
  // 建议不要使用
 {
     let a = 'secret';
     function f() {
         return a;
     }
     //相当于
     //var f= function () {  //f会变量提升
     //    return a;
     //}
 }
 // 优先使用函数表达式
 {
     let a = 'secret';
     let f = function () {
         return a;
     };
 }


块级作用域必须有大括号,如果没有大括号,JavaScript 引擎就认为不存在块级作用域。函数声明也是如此。

 if (true) let x = 1; //会报错
 if (true) {  //正常
     let x = 1;
 }

二、const

声明一个只读的常量。一旦声明,常量的值就不能改变。必须立即初始化,不能留到以后赋值。
其作用域与let命令相同:只在声明所在的块级作用域内有效。
const只能保证这个指针是固定的,也就是说对象中的属性是可变的。
可以使用Object.freeze方法。可以将声明的对象冻结

 var constantize = (obj) => {
     Object.freeze(obj);
     Object.keys(obj).forEach( (key, i) => {
         if ( typeof obj[key] === 'object' ) {
             constantize( obj[key] );
         }
     });
 };

声明变量的六种方法

var 
function 
let 
const 
import
class

var命令和function命令声明的全局变量,是顶层对象的属性;而let、const、class命令声明的全局变量,并不属于顶层对象的属性。

var a = 1;
window.a // 1
let b = 1;
window.b // undefined

js中获取顶层对象的两种方法。

 function foos() {
     (typeof window !== 'undefined'
         ? window
         : (typeof process === 'object' &&
             typeof require === 'function' &&
             typeof global === 'object')
             ? global
             : this);
 }
​
​
 // 方法二
 var getGlobal = function () {
     if (typeof self !== 'undefined') { return self; }
     if (typeof window !== 'undefined') { return window; }
     if (typeof global !== 'undefined') { return global; }
     throw new Error('unable to locate global object');
 };

在ES2020 语言标准中,引入globalThis作为顶层对象。任何环境下,globalThis都是存在的,都可以从它拿到顶层对象,指向全局环境下的this。

//两次打印的对象是相同的
console.log(globalThis)
class Infos {
    gets() {
        console.log(globalThis)
    }
}
let ss = new Infos();
ss.gets();

三、js原型链
1、对象有__proto__属性,函数有prototype属性;对象由函数生成。
2、生成对象时,对象的__proto__属性指向函数的prototype属性。
3、函数也是对象的一种,所以函数有__proto__属性

//首先我们先创建一个构造函数Foo
let  Foo = function() {}
//实例化
let f1= new Foo();
console.log(f1.__proto__ === Foo.prototype)  //true
​
​
//而Foo函数对象都是由Function函数生成的:
console.log(Foo.__proto__ === Function.prototype) //true
console.log(Foo.prototype.constructor === Foo) //true
​
​
//Function函数本身作为对象时,生成它的函数是他自身!
console.log(Function.__proto__ === Function.prototype) //true
console.log(Function.prototype.constructor === Function) //true
​
​
//函数默认的prototype是系统自动生成的一个对象:
console.log(Foo.prototype.__proto__ === Object.prototype) //true
console.log(Function.prototype.__proto__ === Object.prototype) //true
​
​
//新建对象
let o1= new Object(); //或者 let objs = {}
console.log(o1.__proto__ === Object.prototype) //true
​
​
//Object函数既然是函数,那生成它的函数自然是Function函数
console.log(Object.__proto__ === Function.prototype) //true
console.log(Object.prototype.constructor === Object) //true

通过以上的分析可以得出原型链图,如下图所示:
let&const&原型链的理解_第1张图片

你可能感兴趣的:(javascript,前端)