JS 笔记--中级篇

1、ECMAScript中的继承（inheritance）

 function clickMe() {
 /* 实例化基类/
 var superPerson = new SuperPerson();
 superPerson.getFriends();//111,222
 / 实例化子类 /
 var sonPerson1 = new SonPerson();
 sonPerson1.getFriends(); //333,444
 //sonPerson1.sayName(); //正确写法 Tom
 // sonPerson1.sayAge();//错误写法
 sonPerson1.friends.push("999");
 sonPerson1.getFriends();//333,444,999
 var sonPerson2 = new SonPerson();
 sonPerson2.getFriends(); //333,444
 / PS: 本处而非书上说的 sonPerson2.getFriends();输出结果是333,444,999
 * 未实现共享属性friends，实例中更改原型属性，并不能被另一实例所共享（书中解释存在异议）
 /
 }
 / 基类/
 function SuperPerson() { //基类构造函数，存放属性
 this.name = "Tom";
 this.sex = "F";
 this.age = 12;
 this.friends = ["111", "222"];
 }
 SuperPerson.prototype = { //基类原型模式，存放方法
 constructor: SuperPerson,
 getFriends: function () {
 alert(this.friends);
 }
 }
 / 子类 /
 function SonPerson() { //子类构造函数，存放属性
 this.tel = 1389909;
 this.friends = ["333", "444"];
 this.sayName = function () { //子类中调用基类属性的方法必须存在构造函数模式中创建，不能使用原型模式创建【重点：正确写法】
 alert(this.name);
 }
 }
 SonPerson.prototype = new SuperPerson(); //SonPerson类继承SuperPerson类
 / 【重点：错误写法】
 * 以上刚刚把SuperPerson的实例赋值给原型，又接着将原型替换成一个对象字面量而导致的问题
 * 由于现在的本原型包含的是一个Object的实例，而非SuperPerson实例
 * 因此我们设想中的原型链已近被切断--SubPerson和SuperPerson之间已经没有关系了
 *
 */
 //SonPerson.prototype = {
 // sayAge: function () {
 // alert(this.age);
 // }
 //}
 
 

2、组合继承（包括原型链和借用构造函数），又称为伪经典继承

构造函数模式：它的每个成员都无法得到复用，包括函数；
原型模式：使用构造函数的prototype属性来指定那些应该共享的属性和方法；
既使用组合继承来吸收两者的优先，创建实例属性独立，方法复用的对象。

 // 【组合继承（实战用法）：包含了借用构造函数继承和原型链继承】
 // 【区别】
 /* 【借用构造函数】又称经典继承：目的借用构造函数来实现对实例属性的继承 /
 / 【原型链继承】普通继承：目的使用原型链实现对原型属性和方法的继承 */
 function clickMe() {
 var superType = new SuperType();
 superType.getColors(); //111,222
 var subType1 = new SubType();
 subType1.getColors(); //111,222
 subType1.colors.push("333");
 subType1.getColors(); //111,222,333
 var subType2 = new SubType();
 subType2.getColors();//111,222
 }
 function SuperType() {
 this.colors = ["111","222"];
 }
 SuperType.prototype = {
 getColors: function () {
 alert(this.colors);
 }
 }
 function SubType() {
 SuperType.call(this); //经典继承：继承实例属性
 }
 SubType.prototype = new SuperType(); //原型链继承：继承方法
 
 

3、JS的闭包

 // 【闭包】
 /*【完美的闭包】
 * 1、在一个函数的生命周期内所有的属性都得到释放且独立；
 * 2、在函数内属性的作用域应该处于块作用域内（“{}”表示块作用域）；
 *
 /
 function clickMe() {
 / 在场景中 报错的为实现闭包 /
 showNameError(6); //7
 showNameRight(6); //报错,i未定义
 perfect(10); //报错，num未定义
 }
 / 非闭包 /
 function showNameError(num) {
 for (var i = 0; i <= num; i++) {
 document.write( "
"+"Error : " + i );
 }
 alert(i); //7，此处i为function showNameError(num){}函数内作用域
 }
 / 闭包 /
 function showNameRight(num) {
 /
 *块级作用域（通常称为私有作用域）
 *(function () {
 * })()
 *不要小看这两个括号：1、第一个括号表示定义一个匿名函数；2、第二个括号表示执行这个匿名函数；
 /
 (function () {
 for (var i = 0; i <= num; i++) {
 document.write("Right : " + i + "
");
 }
 })()
 alert(i); //报错,i未定义
 }
 / 完美的闭包 PS：我理解的 */
 function perfect(num_) {
 (function () {
 for (var i = 10; i <= num_; i++) {
 var _num = document.getElementById("10").value; //JS不会主动将持有的DOM对象释放
 var num = _num;
 _num = null; //手动释放
 document.write("Right : " + num + "
"); // num的作用域仅存在于块作用域中
 }
 })()
 alert(num); //报错，num未定义
 }
 //clickMe();