Javascript高级程序设计3笔记

 

完全是笔记，99.9%摘录自高程3，方便学习复习。

• 对象认识
• “类”
• 原型
• 继承

 

一、对象认识

最原始的创建对象方式：

 

var person = new Object(); //new一个Object对象 person
person.name = "hank"; //给person添加属性name，初值为hank
person.age = 28; //..
person.job = "eat"; //...
person.sayName = function(){ //给person添加方法sayName
    alert(this.name);
}

看上去有点笨重，后来就流行字面量了：

var person{
    name : "hank",
    age : 28,
    job : "eat",
    sayName : function(){
        alert(this.name);
    }
}    

 

以上两种的缺点：如果创建很多对象，就会产生大量的重复代码。所以，开始有“类”的出现了。一个类，想要多少实例，自己new。

二、类（意义上的）

1.工厂模式

ECMAScript无法创建类。那么，就用一个函数将第一种封装起来。如此这般，可通过调用ceartPerson来创建多个相似对象。但是无法识别对象类型.

function creatPerson(name,age,job){
    var o = new Object(); //new
    o.name = name; //添加属性
    o.age = age; //..
    o.job = job; //..
    o.sayName = function(){ //添加方法
        alert(this.name);
    }
    return o; //将new好的对象返回
}

2.构造函数模式

function Person(name, age, job){
    //没有new对象
    this.name = name; //属性和方法赋值给this对象
    this.age = age;
    this.job = job;
    this.sayName = function(){
        alert(this.name);
    };
    //没有return
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");    

 

person1和person2分别保存着Person的一个不同的实例。都有一个constructor(构造函数)属性，指向Person“person1.constructor == Person”。如此这般之后，就能instanceof出构造函数(对象类型)而不都是Object了。 
-调用方式

// 当作构造函数使用
var person = new Person("Nicholas", 29, "Software Engineer");
person.sayName(); //"Nicholas"
// 作为普通函数调用
Person("Greg", 27, "Doctor"); // 添加到 window
window.sayName(); //"Greg"
// 在另一个对象的作用域中调用
var o = new Object();
Person.call(o, "Kristen", 25, "Nurse");// 添加到 o
o.sayName(); //"Kristen"

 

缺点：每个方法都要在每个实例上重新创建一遍。不同实例上的同名函数是不相等的,所以alert(person1.sayName == person2.sayName); //false。通过把函数定义转移到构造函数外部来解决这个问题

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = sayName;
}
function sayName(){
    alert(this.name);
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
alert(person1.sayName == person2.sayName); //true

 

可是新问题又来了：在全局作用域中定义的函数实际上只能被某个对象调用，这让全局作用域有点名不副实。而更让人无法接受的是：如果对象需要定义很多方法，那么就要定义很多个全局函数，于是我们这个自定义的引用类型就丝毫没有封装性可言了。好在，这些问题可以通过使用原型模式来解决。

三、原型

每个函数都有一个prototype(原型)属性，这个属性是一个指针，指向一个对象。这个对象使得所有实例共享属性和方法。

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
    alert(this.name);
};
var person1 = new Person();
person1.sayName(); //"Nicholas"
var person2 = new Person();
person2.sayName(); //"Nicholas"
alert(person1.sayName == person2.sayName); //true

 

和构造函数模式不同的是，实例共享属性方法。实例访问的实例和方法都是同一个。 

查找对象属性：在对象实体中找，找不到就到原型对象中找。能访问，但是不能修改。即，实例中添加同名属性后，只是在该实例中存在。

 

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
    alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
person1.name = "Greg";
alert(person1.name); //"Greg" ——来自实例
alert(person2.name); //"Nicholas" ——来自原型
delete person1.name;
alert(person1.name); //"Nicholas"——来自原型

 

使用 hasOwnProperty() 方法可以检测一个属性是存在于实例中，还是存在于原型中.只在给定属性存在于对象实例中时，才会返回 true。 
in的话，是分不清在属性存在于原型还是实例中的。因此只要 in 操作符返回 true 而 hasOwnProperty() 返回 false，就可以确定属性是原型中的属性，下面封装一个方法:

function hasPrototypeProperty(object, name){
    //属性是原型中的属性
    return !object.hasOwnProperty(name) && (name in object);
}

 

用字面量写法，让原型模式更简洁

function Person(){
}
Person.prototype = {
    name : "Nicholas",
    age : 29,
    job: "Software Engineer",
    sayName : function () {
        alert(this.name);
    }
};

 

这样写后，constructor就不会再指向Person，因为重写了Person.prototype。需要重新指定constructor的指向。

function Person(){
}
Person.prototype = {
    constructor : Person,
    name : "Nicholas",
    age : 29,
    job: "Software Engineer",
    sayName : function () {
        alert(this.name);
    }
};

 

原型动态性，实例与原型之间的链接是一个指针，而非一个副本。所以，原型上的任何修改都能立即在实例上表现出来，即使是实例创建在先。

var friend = new Person();
Person.prototype.sayHi = function(){
    alert("hi");
};
friend.sayHi(); //"hi" （没有问题！）

 

但是如果是重写整个原型对象（字面量形式），那就不一样了(先实例后原型)

function Person(){
}
var friend = new Person();
Person.prototype = {
    constructor: Person,
    name : "Nicholas",
    age : 29,
    job : "Software Engineer",
    sayName : function () {
        alert(this.name);
    }
};
friend.sayName(); //error

 

 
原型模式的缺点，对于包含引用类型值的属性来说，某个实例的属性赋值，会影响到所有实例。

 

function Person(){
}
Person.prototype = {
    constructor: Person,
    name : "Nicholas",
    age : 29,
    job : "Software Engineer",
    friends : ["Shelby", "Court"],
    sayName : function () {
        alert(this.name);
    }
};
var person1 = new Person();
var person2 = new Person();
//person1.friends = [];//如果先创建的话，那么这个friends就是person1的，但是这样就没法保留原型中的值。
person1.friends.push("Van");//这个friends是原型的。
alert(person1.friends); //"Shelby,Court,Van"
alert(person2.friends); //"Shelby,Court,Van"
alert(person1.friends === person2.friends); //true

 

所以开始引入构造函数+原型模式 :构造函数模式用于指定实例属性，原型模式用于定义方法和共享的属性。

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ["Shelby", "Court"];
}
Person.prototype = {
    constructor : Person,
    sayName : function(){
        alert(this.name);
    }
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Count,Van"
alert(person2.friends); //"Shelby,Count"
alert(person1.friends === person2.friends); //false
alert(person1.sayName === person2.sayName); //true

 

最完美的模式来了，动态原型模式。不能使用对象字面量重写原型。和构造函数+原型的区别是，new的时候才会给原型添加属性。

function Person(name, age, job){
    //属性
    this.name = name;
    this.age = age;
    this.job = job;
    //方法
    if (typeof this.sayName != "function"){
        Person.prototype.sayName = function(){
            alert(this.name);
        };
    }
}
var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName();

四、继承

 最完美的继承：寄生组合式继承

　function object(o){
   function F(){}
   F.prototype = o;
   return new F();
  }
  function inheritPrototype(subType, superType){
   var prototype = object(superType.prototype); //创建对象
   prototype.constructor = subType; //增强对象
   subType.prototype = prototype; //指定对象
  }
  function SuperType(){
    this.property = true;
    this.arr = [1,2,3];
  }
  SuperType.prototype.getSuperValue=function(){
    return this.property;
  }
  function SubType(){
    SuperType.call(this);
    this.subproperty = false;
  }
  inheritPrototype(SubType,SuperType);

  SubType.prototype.getSubValue=function(){
    return this.subproperty;
  }
  var o = new SubType();
  console.log(o);