前端知识基础

1.基础知识

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

1.1 变量类型

1.1 变量类型

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

1.2 typeof运算符

1.2 typeof运算符

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. 不能区分值类型 引用类型只能区分出函数

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

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

强制类型转换共四种情况：字符串拼接、==运算符、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

转化规则：

1. 对象= =对象，永远不相等
2. 对象= =字符串，先将对象转换为字符串（调用toString的方法，然后再进行比较）
3. 对象= =布尔类型，对象先转换为字符串（toString），然后再转化为数字（Number），布尔类型也转换为数字（true是1，false是0），最后让两个数字比较。”“是0。
4. 对象= =数字，对象先转化为字符串（toString），然后把字符串再转为数字（Number ）
5. 数字= =布尔，布尔转化为数字 数字= =字符串，字符串转化为数字
6. 字符串= =布尔，都转化为数字
7. null==undefined，结果是true
8. 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.4 面试题

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 原型规则和示例

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 循环对象自身的属性

2.3 循环对象自身的属性

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

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

2.4 原型链

2.5 instanceo

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

2.6 面试题

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.作用域、闭包

3.1 执行上下文

3.1 执行上下文

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

3.2 this

this

this要在执行时才能确认值，定义时无法确认
如何区分this？

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

function fn() {
    console.log(this);
}
var obj = {fn: fn};
fn(); //window
obj.fn(); //obj
function sum() {
    fn();
}
sum(); //window
var oo = {
    sum: function () {
        fn();
    }
};
oo.sum(); //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知识点总结

3.3 作用域

3.4 作用域链

3.5 闭包

3.6 面试题

4.异步、单线程