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

目录

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.异步、单线程

1.基础知识

总结大纲：

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

1.1 变量类型

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

1.2 typeof运算符

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

typeof undefined; //undefinedtypeof "abc"; //stringtypeof 123; //numbertypeof true; //booleantypeof {}; //objecttypeof []; //objecttypeof null; //objecttypeof console.log; //function

注意：

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

1.3 变量计算——强制类型转换

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

字符串拼接

var a = 100 + 10; //110var 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); //0console.log("" || 'abc'); //'abc'console.log(!window.abc); //true

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

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

1.4 面试题

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}"

2.原型、原型链2.1 构造函数

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;

2.2 原型规则和示例

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();

2.3 循环对象自身的属性

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

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

2.4 原型链2.5 instanceof

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

2.6 面试题

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

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

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

function Elem(id) {    this.elem = document.getElementById(id);}Elem.prototype.html = function (val) {    var elem = this.elem;    if (val) {        elem.innerHTML = val;        return this; //链式操作    } else {        return elem.innerHTML;    }};Elem.prototype.on = function (type, fn) {    var elem = this.elem;    elem.addEventListener(type, fn);    return this;};var div1 = new Elem('div1');div1.html('<p>hello world</p>').on('click', function () {    alert('clicked')}).html('<p>JavaScript</p>');

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

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

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

3.作用域、闭包执行上下文

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

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

this

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

如何区分this？

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

function fn() {    console.log(this);}var obj = {fn: fn};fn(); //windowobj.fn(); //objfunction sum() {    fn();}sum(); //windowvar oo = {    sum: function () {        fn();    }};oo.sum(); //window

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

<div id="div1">有本事点我啊</div>document.getElementById("div1").onclick = fn; //fn中的this是div1function 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知识点总结

4.异步、单线程