前端基础知识总结1——基础知识

╰+攻爆jí腚メ 2022-06-04 06:41 329阅读 0赞

1.基础知识  
    1.1 变量类型  
    1.2 typeof运算符  
    1.3 变量计算——强制类型转换  
    1.4 面试题  
2.原型、原型链  
    2.1 构造函数  
    2.2 原型规则和示例  
    2.3 循环对象自身的属性  
    2.4 原型链  
    2.5 instanceo  
    2.6 面试题  
3.作用域、闭包  
    3.1 执行上下文  
    3.2 this  
    3.3 作用域  
    3.4 作用域链  
    3.5 闭包  
    3.6 面试题  
4.异步、单线程

### 总结大纲： ###

*  基础知识：原型、原型链；作用域、闭包；异步、单线程
 *  JS API：DOM操作；Ajax；事件绑定
 *  开发环境：版本管理；模块化；打包工具
 *  运行环境：页面渲染；性能优化

变量类型分为值类型和引用类型  
值类型：number；string；boolean；null；undefined  
引用类型：对象、数组、函数

<table> 
 <tbody> 
  <tr> 
   <td>1.2 typeof运算符</td> 
  </tr> 
 </tbody> 
</table>

typeof可检测出六种类型：undefined、string、number、boolean、object、function

typeof undefined; //undefined
    typeof "abc"; //string
    typeof 123; //number
    typeof true; //boolean
    typeof {}; //object
    typeof []; //object
    typeof null; //object
    typeof console.log; //function

### 注意： ###

1.  null的类型为object；
2.  typeof只能区分值类型的详细类型，不能区分值类型
3.  引用类型只能区分出函数

<table> 
 <tbody> 
  <tr> 
   <td>1.3 变量计算——强制类型转换</td> 
  </tr> 
 </tbody> 
</table>

强制类型转换共四种情况：字符串拼接、==运算符、if语句、逻辑运算符

### 字符串拼接 ###

var a = 100 + 10; //110
    var b = 100 + '10'; //10010

将数字转换为字符串

### ==运算符 ###

console.log(100=="100"); //true，字符串转为数字
    console.log(0==""); //true，字符串转为数字
    console.log(null==undefined); //true

转化规则：

*  对象==对象，永远不相等
 *  对象==字符串，先将对象转换为字符串（调用toString的方法，然后再进行比较）
 *  对象==布尔类型，对象先转换为字符串（toString），然后再转化为数字（Number），布尔类型也转换为数字（true是1，false是0），最后让两个数字比较。”“是0。
 *  对象==数字，对象先转化为字符串（toString），然后把字符串再转为数字（Number ）
 *  数字==布尔，布尔转化为数字
 *  数字==字符串，字符串转化为数字
 *  字符串==布尔，都转化为数字
 *  null==undefined，结果是true
 *  null或者undefined和其他任何的数据类型比较都不相等

### if语句 ###

var a = true, b = 100, c = '';
    if (a) {
        console.log("1"); //1
    }
    if (b) {
        console.log("2"); //2
    }
    if (c) {
        console.log("3");
    }

在if中是false的情况：0、NaN、”“、null、false

### 逻辑运算符 ###

console.log(10 && 0); //0
    console.log("" || 'abc'); //'abc'
    console.log(!window.abc); //true

判断一个变量会被当做true还是false：  
两次取反

var a = 100;
    console.log(!!a); //true

### 1.何时使用===何时使用==？ ###

if(obj.a==null){ }

这里相当于`obj.a===null || obj.a===undefined`的简写形式  
这是jQuery源码中推荐的写法  
除了这个之外，其他的全部都用===

### 2.JS中有哪些内置函数？ ###

9个，分别是：  
Object、Array、Boolean、Number、String、Function、Date、RegExp、Error  
而Math、JSON是内置对象

### 3.JS按照存储方式区分为哪些类型，并描述其特点？ ###

值类型和引用类型  
特点：值类型把数值分块存在内存中，引用类型多个变量共用内存块，通过变量指针赋值

### 4.如何理解JSON？ ###

JSON不过是一个JS对象而已

把JSON格式的字符串转换为JSON格式的对象:
    JSON.parse('{"a":10,"b":20}'); //{a: 10, b: 20}
    
    把JSON格式的对象转换为JSON格式的字符串:
    JSON.stringify({
       "a": 10, "b": 20}); //"{"a":10,"b":20}"

function Foo(name, age) { 
        this.name = name;
        this.age = age;
        this.class = 'class-1';
        //return this; 默认有这一行
    }
    var f = new Foo('zhangsan', 20);
    //var f1 = new Foo('lisi',30); 创建多个对象

`var a = {};` 其实是`var a = new Object();`的语法糖  
`var a = [];` 其实是`var a = new Array();`的语法糖  
`function Foo(){...}` 其实是`var Foo = new Function(...);`的语法糖

使用instanceof判断一个函数是否是一个变量的构造函数，如：`变量 instanceof Array;`

<table> 
 <tbody> 
  <tr> 
   <td>2.2 原型规则和示例</td> 
  </tr> 
 </tbody> 
</table>

### 1.所有的引用类型（数组、对象、函数），都具有对象特性，即可自由扩展属性（除了null意外） ###

var obj = {};
    obj.a = 100;
    var arr = [];
    arr.a = 100;
    function fn() { }
    fn.a = 100;

### 2.所有的引用类型（数组、对象、函数），都有一个`__proto__`（隐式原型）属性，属性值是一个普通的对象 ###

obj.__proto__;
    arr.__proto__;
    fn.__proto__;

### 3.所有的函数，都有一个prototype（显式原型）属性，属性值也是一个普通的对象 ###

fn.prototype;

### 4.所有的引用类型（数组、对象、函数），`__proto__`属性值指向它的构造函数的”prototype”属性值 ###

obj.__proto__ === Object.prototype;

### 5.当试图得到一个引用对象的某个属性值时，如果这个对象本身没有这个属性，那么会去它的`__proto__`即它的构造函数的prototype中寻找 ###

//构造函数：
    function Foo(name, age) { 
        this.name = name;
    }
    Foo.prototype.alertName = function () { 
        alert(this.name);
    };
    //创建实例：
    var f = new Foo('zhangsan');
    f.printName = function () { 
        console.log(this.name);
    };
    //测试：
    f.printName();
    f.alertName();

<table> 
 <tbody> 
  <tr> 
   <td>2.3 循环对象自身的属性</td> 
  </tr> 
 </tbody> 
</table>

for (var item in f) {
        if (f.hasOwnProperty(item)) {
            console.log(item); //name printName
        }
    }

高级浏览器已经在for in中屏蔽了来自原型的属性  
不过建议加上判断，来保证程序的健壮性

<table> 
 <tbody> 
  <tr> 
   <td>2.5 instanceof</td> 
  </tr> 
 </tbody> 
</table>

用于判断引用类型属于哪个构造函数的方法  
如：  
`f instanceof Foo`的判断逻辑是：  
f的`__proto__`一层一层往上，能否对应到Foo.prototype  
`f instanceof Object`同理

### 1.如何准确判断一个变量是数组类型？ ###

var arr = [];
    arr instanceof Array; //true

### 2.写一个原型链继承的例子？ ###

### 3.描述new一个对象的过程？ ###

创建一个新对象 —> this指向这个新对象 —> 执行代码，即对this赋值 —> 返回this

### 4.Zepto（或其他框架）源码中如何使用原型链？ ###

<table> 
 <tbody> 
  <tr> 
   <td>执行上下文</td> 
  </tr> 
 </tbody> 
</table>

console.log(a); //undefined
    var a = 100;
    fn('zhangsan');
    function fn(name) {
        age = 20;
        console.log(name, age); //'zhangsan' 20
        var age;
    }

范围；一段`<script>`或者一个函数  
全局：变量定义、函数声明  
函数：变量定义、函数声明、this、arguments

this要在执行时才能确认值，定义时无法确认

### 如何区分this？ ###

1.函数执行，首先找到在哪执行，看函数名前面是否有点，有的话，“.”前面是谁，this就是谁，没有的话this就是window

2.自执行函数的this永远是window  
3.给元素的某一个事件绑定方法，当事件触发的时候，执行对应的方法，方法中的this是当前的元素

<div id="div1">有本事点我啊</div>
    
    document.getElementById("div1").onclick = fn; //fn中的this是div1
    function fn() { 
        console.log(this);
    }
    document.getElementById("div1").onclick = function () {  //this是div1
        fn(); //fn中的this是window
    };

4.在构造函数模式中，类中（函数体中）出现的this.xxx = xxx中的this是当前类的一个实例

function Foo(age) { 
        this.age = age;
    }
    var f = new Foo("12");
    f.age; //12

5.通过call、apply来改变this

--------------------

> call、apply、bind知识点总结