javascript的基础知识及面向对象和原型属性

本身总结一下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解释器会将其计算出一个值。
表达式能够是：数据 或者 数据和运算符的组合
例如：一、"abc"、true、1 + 二、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;

实参（实际参数），即函数被调用时的参数，是一个具体的值或者表达式（一、"老司机"、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的     原型对象