自己总结一下javascript的基础知识，希望对大家有用，也希望大家来拍砖，毕竟是个人的理解啊
1.1 类型检查：typeof（验证数据类型是：string）
var num = 123;
console.log(typeof num); //
1.2 in 运算符
作用：判断指定属性是否存在于指定的对象中。
如果指定的属性存在于指定的对象中，则 in 运算符会返回 true。
语法：
属性 in 对象
返回值：true 或者 false
示例：
var obj = {
age: 18
};
var hasAge = "age" in obj;
console.log(hasAge); //
- 问题：如何判断对象存在某个属性或方法？
1 in 2 浏览器能力检测
1.3 值类型和引用类型（重要）
值类型：变量中存储的是数值本身 引用类型：变量中存储的是数据的引用（地址） 对象中的属性可以是值类型也可以是引用类型
- 面试题
var o = new Object();
function foo(obj) {
obj.name = "腐女";
obj = new Object();
obj.name = "屌丝";
}
foo(o);
console.log(o.name); //
1.4 逻辑中断
|| 如果第一个为真 就返回第一个表达式, 如果为假 则返回第二个表达式 && 如果第一个为假 就返回第一个表达式, 如果为真则返回第二个表达式
- 练习：
function fn(num) {
// 如果传入num，就打印num的值
// 如果没有传入 就打印 没有参数
}
1.5 delete
作用：删除一个对象的属性。 语法：delete 属性名 返回值： true 或 false 用法: 1 删除数组中的元素 2 删除对象的属性或方法 3 删除没有用 var 声明 变量
1.6 try-catch
// 语法:
try {
// 可能出现错误的代码
} catch ( e ) {
// 出现错误会执行这里的代码
} finally { // 可选
// 无论是否出现异常, 最后执行
}
// 手动抛出异常
throw new Error("别瞎搞");
throw "这都行？？？";
1.7 函数声明和函数表达式的区别
- 函数声明不允许出现在其他中
// 函数声明
function foo() {}
// 函数表达式
var foo = function foo() {};
// 不推荐这么做！！
if(true) {
function f() {
console.log(true);
}
}
f();
概念：语句和表达式
表达式：(有值) 表达式（expression）是JavaScript中的一个短语，JavaScript解释器会将其计算出一个值。 表达式可以是：数据 或者 数据和运算符的组合 例如：1、"abc"、true、1 + 2、i++、a === b ? a : b 、a = 1 语句：(带分号) 语句是JavaScript的句子或命令，以分号结束。 var a = 1;
2. 面向对象
2.1 为什么要面向对象？
面试中如何回答，什么是面向对象？
- 1 面向对象和面向过程的异同
- 2 在JavaScript中面向对象的表现形式
- 3 其他语言中面向对象的表现形式（了解）
2.1.1 面向对象和面向过程的区别
- jQuery创建对象和js创建对象对比
// jQuery
$("body").append("<p>jQuery创建节点就是如此潇洒</p>");
// js
var p = document.createElement("p");
var txt = document.createTextNode("creat E..，creat T..真麻烦");
p.appendChild(txt);
document.body.appendChild(p);
- 面向对象和面向过程解释
面向过程：所有的细节、步骤、过程，要一步一步亲历亲为（执行者） 面向对象：找到能完成这个事情的对象，让它帮你完成就行（调度者） 生活中的例子： 做饭（叫外卖） 开公司
-
问题：面向对象这么好，面向过程就没用了？面向对象是对面向过程的一个封装
-
案例：给div和p添加红色边框
// 通过标签名获取元素
function tag(tagStr) {
return document.getElementsByTagName(tagStr);
}
var divs = tag("div");
for(var i = 0; i < divs.length; i++) {
divs[i].style.border = "1px dotted red";
}
var ps = tag("p");
for(var i = 0; i < ps.length; i++) {
ps[i].style.border = "1px dotted red";
}
- 练习：写一个通过id属性获取元素的函数
2.1.2 函数封装的问题
- 1 全局污染（变量在全局范围内有效）
- 2 大量的函数无法管理
- 3 使得维护变得困难
2.1.3 使用面向对象方式组织代码
// 使用对象
var itcast = {
id: function(idStr) {
return document.getElementById(idStr);
},
tag: function(tagStr) {
return document.getElementsByTagName(tagStr);
}
};
2.2 面向对象优势（解决函数封装问题）
- 封装代码，使代码更好维护
- 减少全局污染
- 将功能相近的代码组织到一起维护方便，找错方便
var itcast = {
// 元素获取模块
getElem: {
tag: function() {},
id: function() {}
},
// 样式模块
css: {
addStyle: function() {},
removeStyle: function() {},
hasStyle: function() {}
}
};
2.2.1 面向对象的基本模型
- 1 将数据与功能封装成函数(方法)
- 2 将相关的功能绑定到一起(对象)
- 3 将功能进行分组(模块)
3. 常用DOM操作
3.1 四字总结：增删改查
3.1.1 获取元素操作
getElementById getElementsByTagName getElementsByClassName
3.1.2 元素节点操作
appendChild insertBefore removeChild replaceChild cloneNode createElement createTextNode（创建文本节点）
3.1.3 属性节点操作
getAttribute setAttribute removeAttribute
3.1.4 常用DOM属性
className innerHTML innerText/textContent value children
3.2 DOM就是一个非常典型的面向对象，所有的节点都是对象
在DOM中所有的东西全部都是对象，所以，使用DOM非常简单方便 jQuery中所有的东西也都是对象
4. 面向对象
- 案例：写一个对象描述一个人要求有姓名、年龄、性别、sayHello
4.1 对象字面量（直接量）
4.1.1 对象是键值对的集合
- 属性访问语法：点运算符 和 []
// json 的表示法， 对象的直接量（字面量）
var p = {
name: "jim",
age: 19,
sex: "男",
sayHello: function() {
alert("你好，哈哈哈哈");
}
};
p.sayHello();
// 此时可以把对象称为：关联数组
p["sayHello"]();
- 字面量的缺点：无法复用
例如： 描述一个商品 Goods(name, price, img, count, pDate) 假如有 100 件
4.2 构造函数
- 优势：可复用
4.2.1 构造函数使用注意点（重点）
- 1 函数名以大写字母开头(推荐)
- 2 不需要返回值
- 3 为对象添加成员使用 this.成员名 = 值
- 4 创建对象使用 new 关键字
var Person = function() {
this.name = "jim";
this.age = 19;
this.gender = "男";
this.sayHello = function() {
alert("你好，哈哈哈哈");
};
};
// 创建对象（构造函数Person的对象）
var p = new Person();
// 访问对象的 属性
console.log(p.name);
// 访问对象的 方法
p.sayHello();
- 案例：修改 Person 为带参数的形式
- 练习：
写一个学生 Student, 要求有 姓名性别年龄和课程分数(语文, 数学, 英语)和说话的方法
4.3 函数参数问题
- 案例：求三角形面积（ s = d * h / 2）
// 不使用函数
var area = 10 * 10 / 2;
// 封装成函数
function getArea() {
var area = 10 * 10 / 2;
return area;
}
// 改进
function getArea(bottom, height) {
return bottom * height / 2;
}
getArea(10, 20);
4.3.1 函数参数注意点
- 1 把函数参数看作是变量，只能在函数内部使用
- 2 函数调用时参数传入顺序不能颠倒
- 3 参数的值是在函数被调用的时候通过传入的参数设置的值
-
4 函数调用时不传入参数，则函数内部获取参数的值为：undefined
-
练习：写一个函数打印一段文字，要求：传入什么内容，就打印什么内容
4.3.2 形参和实参
形参（形式参数），即函数定义时的参数，只起到占位的作用，等到函数被调用的时候，会被传入的具体值代替。【联想数学公式】 s = d * h / 2;
实参（实际参数），即函数被调用时的参数，是一个具体的值或者表达式（1、"老司机"、true、[2, 2]、{ name: "two"} 等）
4.4 原型（prototype）
4.4.1 方法放在构造函数中的缺点
- 浪费内存
构造函数中的属性和方法，会在调用的时候被处理，即会消耗内存。 new 出来的对象，都是一个单独副本 new 一个对象就占用一份内存，new 多少对象就占用多少份内存。 但是对于构造函数中的方法来说，每个对象的方法都是相同的（或者说应该是被共享的）
对于典型的淘宝商品详情页，经测试发现，每增加一个 DOM 节点，会导致首屏渲染时间延迟约 0.5ms
4.4.2 原型的说明
- 一个对象的原型就是：构造函数的prototype属性的值
- 只要是函数就有 prototype 属性，即函数的原型属性
- 函数的原型属性（prototype）的类型是："object"
- 由 构造函数 创建出来的对象，会默认链接到其构造函数的这个属性（prototype）的值上
- 构造函数的 prototype 属性的作用是：实现数据共享
function Person() {}
// prototype 即 原型
Person.prototype.legs = 2;
var p = new Person();
console.log(p.legs);
4.4.3 属性查找规则
在访问对象的某一个属性 (方法)的时候： 1 首先会在当前对象中查找有没有该属性 2 如果当前对象没有, 就会在构造方法的定义规则中查找(当前对象) 3 如果没有, 就会到与对象联系起来的 构造函数的 prototype 属性的值中找
4.5 利用原型改良构造函数
// 对象会到 与它联系的 prototype 中找数据
// 可以考虑将共享的数据, 放到 里面
function Person(name) {
this.name = name;
}
Person.prototype.sayHello = function() {
alert(this.name);
};
var p = new Person();
p.sayHello();
- 原则：只将公共的属性和方法放到 prototype 中
4.5.1 属性修改和读取的区别
获取操作： 遵循属性查找原则 赋值操作（只与当前对象有关）： 只会操作对象本身，如果对象中没有该属性则创建该属性，并赋值；如果对象中有，则修改
4.6 prototype 和 __proto__
__proto__是非标准属性
对象中有一个属性 叫 __proto__ 对象的 __proto__ 与创建它的构造函数的 prototype 是一个东西
function F() {}
var o = new F();
console.log(o.__proto__ === F.prototype);
- 术语
F.prototype 原型属性 f.__proto__ 原型对象 F.prototype 是 构造函数F的 原型属性 f.__proto__ 是 对象f的 原型对象