面向对象第7天
今天的知识怎么说呢，说多也多，说少也少，有些凌乱。主要的知识点是闭包的三个应用、严格模式的相关知识点、ES5数组新方法、创建对象的方式、继承的方式。下面对各个知识点做详细介绍。
一、闭包的三个应用
1. 参数复用
小案例：音乐模板的js代码
onload = function() { //入口函数 function bindNav(fn) { var lis = document.querySelectorAll("#nav li"); for(var i = 0, l = lis.length; i < l; i++){ lis[i].addEventListener("click", function() { switch(this.getAttribute('data-name')){ case "find": fn("这是发现音乐。"); break; case "mine": fn("这是我的音乐。"); break; case "friend": fn("这是我的朋友。"); break; } }); } } function curryingBindContent(content) { return function(text) { document.querySelector(content).innerHTML = text; }; } bindNav(curryingBindContent("#content")); };
2. 延迟计算/执行
小案例：统计某地一周售楼的数量
/** * [curryingSales 创建可以获取和保存售楼数闭包函数] * @param {Function} fn [fn函数决定是获取周总数] * @return {[type]} [闭包函数] */ function curryingSales(fn){ var dailySales=[]; return function(val){ if(val==undefined){ return fn.apply(null,dailySales); }else{ dailySales.push(val); } }; } var weeklyTotal=curryingSales(function(){ var sum=0; for(var i=0;l=arguments.length,i<l;i++){ sum+=arguments[i]; } return sum; }); weeklyTotal(2); weeklyTotal(1); weeklyTotal(2); weeklyTotal(3); weeklyTotal(1); weeklyTotal(5); weeklyTotal(4); console.log(weeklyTotal());
3. 提前返回
小案例：对addEventListener和attachEvent的兼容代码
var addEvent = function() { // 浏览器支持addEventListener方法 if(window.addEventListener){ return function(element, type, callback, captrue) { elem.addEventListener(type, callback, captrue); }; } else { // 浏览器支持attachEvent方法 return function(element, type, callback) { elem.attachEvent('on' + type, callback); }; } }();
二、严格模式的相关知识点
1. 出现严格模式的目的
（1）消除JavaScript语法的一些不合理、不严谨之处，减少一些怪异行为；
（2）消除代码运行的一些不安全之处，保证代码运行的安全；
（3）提高编译效率，增加运行效率；
（4）为未来新版本的JavaScript做好铺垫。
2. 严格模式标记
直接在js代码中直接添加 "use strict";即可， 在老版本浏览器会将其当做一行普通字符串忽略。
3. 使用模式
（1）针对整个脚本文件
将"use strict;"放在脚本文件的第一行，则整个脚本将以“严格模式”运行。如果此语句不放在第一行，则无效，整个脚本以“正常模式”运行。
<script> "use strict"; console.log("这是严格模式"); </script> <script> console.log("这是正常模式"); "use strict"; </script>
（2）针对单个函数
将"use strict;"放在函数体的第一行，则整个函数以"严格模式"运行。
function strict() { "use strict"; console.log("这是严格模式"); } function noStrict() { console.log("这是正常模式"); "use strict"; }
（3）脚本文件的变通写法
由于第一种方式不利于文件合并，所以最好的做法是：将整个脚本文件放在一个沙箱模式（立即执行的匿名函数）中。
(function() { "use strict"; // 代码块 }());
4. 语法以及行为变化
严格模式下，对JavaScript的语法和行为，都做一些变化。
（1）全局变量的隐式声明
在正常模式中，如果一个变量没有声明就赋值，默认是全局变量。但是在严格模式已禁止这种用法，全局变量必须显式声明。
"use strict";
v = 1; // 报错，v is not defined。
在严格模式下，变量必须先使用var定义，再赋值。
（2）静态绑定
JavaScript语言一个特点，就是允许"动态绑定"，即某些属性和方法属于哪一个对象，不是在编译时确定的，而是在运行时确定的。
严格模式对动态绑定做一些限制。某些情况下，只允许静态绑定。也就是说，属性和方法到底归属哪个对象，在编译阶段就确定。这样做有利于编译效率的提高，也使代码更易阅读，更少出现bug。
a. 禁止使用with语句
原因：with语句无法在编译阶段就确定属性到底归属哪个对象。
"use strict"; var a = 1; // 报错，语法异常 with(obj){ a = 2; }
b. eval作用域
正常模式，JavaScript语言具有两种变量作用域：全局作用域 和 函数作用域（局部作用域）。
严格模式，具有第三种作用域：eval作用域。
正常模式下，eval语句的作用域取决于 它处于全局作用域，还是函数作用域。
严格模式下，eval语句本身就是一个作用域，不再能够产生全局变量，其所生产的变量只能用于eval内部。
<script> "use strict"; var x = 2; console.log(eval("var x = 3; x")); // 3 console.log(x); // 2 </script>
c. 增强安全性
在普通函数执行模式下，禁止this关键字指向全局对象. 因此，在使用构造函数时，忘记写new，this就不再指向window对象，而是报错。就不会意外给window对象添加属性或方法。
function foo() { console.log(this); // window } function foo() { "use strict"; console.log(this); // undefined } function foo() { "use strict"; this.name = "tom"; } var f = foo(); // 报错
d. 禁止在函数内部访问caller以及arguments
function fn() { "use strict"; fn.caller; // 报错 fn.arguments; // 报错 } fn();
e. 禁止删除变量
在严格模式下无法删除变量。只有configurable设置为true的对象属性，才能被删除。
"use strict"; var x; delete x; // 报错 var obj = Object.create(null, { "x": { value: 10, configurable: true } }); delete obj.x; // success
f. 显式报错
(1) 在正常模式下，为一个对象的只读属性进行赋值，不会报错，只会默默的失败;而严格模式下，会抛出异常。
"use strict"; var obj = {}; Object.defineProperty(o, "a", { value: 1, writable: false }); obj.a = 2; // 报错
(2) 严格模式下，对一个使用getter方法读取的属性进行赋值，会报错。
"use strict"; var obj = { get a() { return 1; } }; obj.a = 2; // 报错
(3) 严格模式下，对禁止扩展的对象添加新属性，会报错。
"use strict"; var obj = {}; Object.preventExtensions(obj); obj.a = 1; // 报错
(4)严格模式下，删除一个不可删除的属性，会报错。
"use strict"; delete Object.prototype; // 报错
g. 重名错误: 严格模式新增了一些语法错误。
(1)对象不能有重名的属性
正常模式下，如果对象有多个重名属性，最后赋值的那个属性会覆盖前面的值。严格模式下，这属于语法错误。
"use strict"; var obj = { p: 1, p: 2 }; // 语法错误
(2)函数不能有重名的参数
正常模式下，如果函数有多个重名的参数，可以用arguments[i]读取。严格模式下，这属于语法错误。
"use strict"; function f(a, a, b) { // 语法错误 return; }
（3）arguments对象的限制
arguments是函数的参数对象，严格模式对它的使用做了限制。
a. 不允许对arguments赋值
"use strict"; arguments++; // 语法错误 var obj = { set p(arguments) { } }; // 语法错误 try { } catch (arguments) { } // 语法错误 function arguments() { } // 语法错误 var f = new Function("arguments", "'use strict'; return 17;"); // 语法错误
b. arguments不再追踪参数的变化
function f(a) { a = 2; return [a, arguments[0]]; } f(1); // 正常模式为[2,2] function f(a) { "use strict"; a = 2; return [a, arguments[0]]; } f(1); // 严格模式为[2,1]
c. 禁止使用arguments.callee
这意味着，无法在匿名函数内部调用自身了。
"use strict"; var f = function() { return arguments.callee; }; f(); // 报错
（4）函数必须声明在顶层
将来Javascript的新版本会引入"块级作用域"。为了与新版本接轨，严格模式只允许在全局作用域或函数作用域的顶层声明函数。也就是说，不允许在非函数的代码块内声明函数。
"use strict"; if (true) { function f1() { } // 语法错误 } for (var i = 0; i < 5; i++) { function f2() { } // 语法错误 }
（5）保留字
为了向将来Javascript的新版本过渡，严格模式新增了一些保留字：implements, interface, let, package, private, protected, public, static, yield。
使用这些词作为变量名将会报错。
function package(protected) { // 出现保留字，语法错误 "use strict"; var implements; //出现保留字， 语法错误 }
此外，ECMAscript第五版本身还规定了另一些保留字（class, enum, export, extends, import, super），以及各大浏览器自行增加的const保留字，也是不能作为变量名的。
三、ES5数组的新方法
1. forEach
forEach是Array新方法中最基本的一个，就是遍历，循环。Array在ES5新增的方法中，参数都是function类型，默认有传参，forEach方法中的function回调支持3个参数，第1个是遍历的数组内容；第2个是对应的数组索引，第3个是数组本身。
[].forEach(function(value, index, array) { // ... });
2. map
这里的map不是“地图”的意思，而是指“映射”。[].map(); 基本用法跟forEach方法类似：array.map(callback,[ thisObject]);callback参数与forEach类似：
[].map(function(value, index, array) { // ... });
案例：数组项求平方
var data = [1, 2, 3, 4]; var squares = data.map(function (item) { return item * item; }); alert(squares); // 1, 4, 9, 16
3. filter 过滤器
filter为“过滤”、“筛选”的意思。指数组filter后，返回过滤后的新数组。用法跟map极为相似：array.filter(callback,[ thisObject]);
filter的callback函数需要返回布尔值true或false.
4. some和every
some：指“某些”的意思，指是否“某些项”合乎条件。every:表示是否“每一项”都要靠谱.用法如下：
array.some(callback,[ thisObject]);
简单演示：
var scores = [5, 8, 3, 10]; var current = 7; function higherThanCurrent(score) { return score > current; } if (scores.some(higherThanCurrent)) { alert("朕准了！"); }
array.every(callback,[ thisObject]);
简单演示：
var scores = [5, 8, 3, 10]; var current = 7; if (scores.every(higherThanCurrent)) { console.log("朕准了！"); } else { console.log("来人，拖出去斩了！"); }
5. indexOf
indexOf方法在字符串中自古就有，string.indexOf(searchString, position)。数组的indexOf方法与之类似。用法：array.indexOf(searchElement[, fromIndex]); 返回整数索引值，如果没有匹配（严格匹配），返回-1. fromIndex可选，表示从这个位置开始搜索，若缺省或格式不合要求，使用默认值0.
小案例：
var data = [2, 5, 7, 3, 5]; console.log(data.indexOf(5, "x")); // 1 ("x"被忽略) console.log(data.indexOf(5, "3")); // 4 (从3号位开始搜索) console.log(data.indexOf(4)); // -1 (未找到) console.log(data.indexOf("5")); // -1 (未找到，因为5 !== "5")
6. lastIndexOf
lastIndexOf方法与indexOf方法类似：array.lastIndexOf(searchElement[, fromIndex]);只是lastIndexOf是从字符串的末尾开始查找，而不是从开头。还有一个不同就是fromIndex的默认值是array.length - 1而不是0.
var data = [2, 5, 7, 3, 5]; console.log(data.lastIndexOf(5)); // 4 console.log(data.lastIndexOf(5, 3)); // 1 (从后往前，索引值小于3的开始搜索) console.log(data.lastIndexOf(4)); // -1 (未找到)
7. reduce
迭代”、“递归(recursion)”的含义，用法：array.reduce(callback[, initialValue]);callback函数接受4个参数：之前值、当前值、索引值以及数组本身。initialValue参数可选，表示初始值。若指定，则当作最初使用的previous值；如果缺省，则使用数组的第一个元素作为previous初始值，同时current往后排一位，相比有initialValue值少一次迭代。
小案例：
var arr = [10,11,12,13,14]; var sum = arr.reduce(function(prev, current, index, arr) { return prev + current; }, 0); console.log(sum); //60
实现上：
// 初始设置 previous = initialValue = 10, current = 11 // 第一次迭代 previous = (10 +11) = 21, current = 12 // 第二次迭代 previous = (21+ 12) = 33, current =13 // 第三次迭代 previous = (33 + 13) = 46, current = 14 //第四次迭代 previous = (46 + 14) = 60, current = undefined(退出)
8.reduceRight
用法与reduce相似，实现上差异在于reduceRight是从数组的末尾开始实现。
小案例：
var data = [1, 2, 3, 4]; var special = data.reduceRight(function (previous, current, index) { if (index == 0) { return previous + current; } return previous - current; }); console.log(special); // 0
实现上：
// 初始设置 index = 3, previous = initialValue = 4, current = 3 // 第一次迭代 index = 2, previous = (4- 3) = 1, current = 2 // 第二次迭代 index = 1, previous = (1 - 2) = -1, current = 1 // 第三次迭代 index = 0, previous = (-1 + 1) = 0, current = undefined (退出)
四、创建对象的方式
1. 工厂模式
创建对象,返回带有属性和方法的person对象
function createPerson(name, age,gender) { var person = new Person(); person.name=name; person.age=age; person.gender=gender person.sayName=function() { alert(this.name); }; return person; } createPerson("tom",20,"男").sayName();
2. 构造函数模式
创建对象，这种方式有个缺陷是sayName这个方法，它的每个实例都是指向不同的函数实例，而不是同一个。
function Person(name,age,gender) { this.name=name; this.age=age; this.gender=gender; this.sayName=function() { console.log(this.name); }; } var person = new Person("rose",23,"女"); person.sayName();
3. 原型模式
创建对象，解决了上述中提到的缺陷，使不同的对象的函数（如sayFriends）指向了同一个函数。但它本身也有缺陷，就是实例共享了引用类型friends，从下面的代码执行结果可以看到，两个实例的friends的值是一样的。
function Person() { } Person.prototype = { constructor : Person, name:"Tom", age:20, gender:"男", friends:["Jack","Rose"], sayFriends:function() { console.log(this.friends); } }; var person1 = new Person(); person1.friends.push("Mary"); person1.sayFriends(); //Jack,Rose,Mary var person2 = new Person(); person2.sayFriends(); //Jack,Rose,Mary
4. 组合模式（推荐）
使用原型模式和构造函数创建对象，解决了上述方法中提到的缺陷，而且这也是使用最广泛、认同度最高的创建对象的方法，强烈推荐使用。
function Person(name,age,gender) { this.name=name; this.age=age; this.gender=gender; this.friends=["Jack","Rose"]; } Person.prototype.sayFriends=function() { console.log("My name is"+this.name+","+"My friends are"+this.friends); }; var person1 = new Person("Tom",20,"男"); var person2 = new Person("Alice",18,"女"); person1.friends.push("Marck"); person1.sayFriends(); //My name is Tom ,My friends are Jack,Rose,Marck person2.sayFriends(); //My name is Alice,My friends are Jack,Rose
5. 动态原型
这个模式的好处在于看起来更像传统的面向对象编程，具有更好的封装性，因为在构造函数里完成了对原型创建。这也是一个推荐的创建对象的方法。
function Person(name, age) { this.name = name; this.age = age; // method if(typeof this.sayName !== 'function'){ Person.prototype.sayName = function() { console.log(this.name); } } }
6. 寄生构造函数模式 (不常用，不推荐)
function Person(name, age) { var obj = new Object; obj.name = name; obj.age = age; obj.sayName = function() { console.log(this.name); }; return obj; }
7. 稳妥构造函数模式 (不常用，不推荐)
function Person(name, age) { var obj = new Object; obj.sayName = function() { console.log(name); }; }
五、继承方式
1. 原型式
利用原型让一个引用类型继承另外一个引用类型的属性和方法
function A() { } A.prototype.location = "地球上。"; A.prototype.say = function() {}; A.prototype.talk = function() {}; A.prototype.run = function() {}; var a = new A; console.log(a.location); A.prototype = { say:function() {}, talk:function() {}, run:function() {} }; var na = new A; console.log(na);
2. 混入式
var o1 = { name: 'tom' }; var o2 = { age: 18 }; var o3 = { gender: '男' }; console.log(o1); o1.extend = function() { var k, i = 0, l = arguments.length, args = arguments; // 遍历在arguments上的每一对象 for (; i < l; i++) { // 枚举当前对象上的所有属性，添加到this上 for (k in args[i]) { this[k] = args[i][k]; } } }; o1.extend(o2, o3); console.log(o1);
3. 借用构造函数
在子类型构造函数的内部调用超类构造函数，通过使用call()和apply()方法可以在新创建的对象上执行构造函数。
function SuperType() { this.colors = ["red","blue","green"]; } function SubType() { SuperType.call(this);//继承了SuperType } var instance1 = new SubType(); instance1.colors.push("black"); console.log(instance1.colors);//"red","blue","green","black" var instance2 = new SubType(); console.log(instance2.colors);//"red","blue","green"
4. 对象冒充
function parent(name, age) { this.name = name; this.age = age; } function child(name, age, gender, address) { // 将parent作为child对象的一个方法来调用 this.parent = parent; this.parent(name, age); delete this.parent; this.gender = gender; this.address = address; } var ch = new child('tom', 18, 'boy', 'beijing'); console.log(ch);
5. 组合继承（借用构造函数、原型）
将原型链和借用构造函数的技术组合在一块，从而发挥两者之长的一种继承模式。
6. 寄生式（不常用）
创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后再像真正是它做了所有工作一样返回对象。
7. 组合寄生（不常用）
通过借用函数来继承属性，通过原型链的混成形式来继承方法
posted on 2016-11-16 19:23 fatimah_man 阅读(140) 评论(0) 编辑 收藏 举报
