前端基础知识总结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; //undefined
typeof "abc"; //string
typeof 123; //number
typeof true; //boolean
typeof {}; //object
typeof []; //object
typeof null; //object
typeof console.log; //function注意：
- null的类型为object；
- typeof只能区分值类型的详细类型，不能区分值类型
- 引用类型只能区分出函数
| 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转化规则：
- 对象==对象，永远不相等
- 对象==字符串，先将对象转换为字符串（调用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.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; //true2.写一个原型链继承的例子？
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('hello world
').on('click', function () {
alert('clicked')
}).html('JavaScript
');3.描述new一个对象的过程？
创建一个新对象 —> this指向这个新对象 —> 执行代码，即对this赋值 —> 返回this
4.Zepto（或其他框架）源码中如何使用原型链？
| 3.作用域、闭包 |
| 执行上下文 |
console.log(a); //undefined
var a = 100;
fn('zhangsan');
function fn(name) {
age = 20;
console.log(name, age); //'zhangsan' 20
var age;
}范围；一段