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解释器会将其计算出一个值。
表达式可以是：数据 或者 数据和运算符的组合
例如：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的     原型对象