js 原型理解(一)

js 原型理解(一)

1. 原型对象说明

无论什么时候，只要创建了一个新的函数,就会根据一组特定的规则为该函数创建一个prototype属性，这个属性是一个指针，指向该函数的原型对象。所有的原型对象都会自动获取一个constructor属性，这个属性也是一个指针，指向该函数。– Javascript高级程序设计 (第3版 p148)

原型对象是伴随函数创建而创建的

例子

function Person(){
       this.name = "张三";
   }
   console.log(Person.prototype.constructor === Person);
//返回为 true 表明 默认确实指向创建的函数

2. 原型对象相关属性及方法

2.1 constructor属性

这是原型对象默认属性，是一个指针，默认指向该函数

2.2 hasOwnProperty()

用于判断该属性 是否存在于该对象里面

function Person(){
    this.name = "zhangsan";
}
Person.prototype.age = "23";
var p = new Person();
p.hasOwnProperty("name"); //返回true
p.hasOwnProperty("age"); //返回false
//可以是对象之后 重新添加的属性 也可以是构造函数本身的属性

2.3 in 操作符

in 操作符 主要判断该属性是否存在于该对象，首先从对象中查询 查询不到就会查询原型对象中的属性，只要存在一个 就返回true

例子

//判断属性是否存在
function hasProperty(obj, property){
    if (!(property in obj)){
        console.log(property + " 不存在");
    } else if (obj.hasOwnProperty(property)){
        console.log(property + "存在于对象中");
    } else {
        console.log(property + "存在于原型中");
    }
}

3. 原型对象的用处

3.1 作为公用属性与方法

弥补构造函数的不足，可以共用属性和方法，而不是使用构造函数去共用，如果使用构造函数去共用的话，每次创建否是一个新的属性或者方法。

例子

function Person(){
    this.name = "张三";
    this.age = 23;
    this.sayName = function (){
        alert(this.name);
    }
}
Person.prototype.sayName1 = function (){
    alert(this.name);
}
var p1 = new Person();
var p2 = new Person();
console.log(p1.sayName === p2.sayName); //false
console.log(p1.name === p2.name); //true
//每次实例化 都是一个新的方法 共用属性
console.log(p1.sayName1 === p2.sayName1); //true
//每次调用同一个方法

上面的模式 其实就已经接近于组合模式了， 使用构造函数封装属性，使用原型对象共用方法

4.原型链

**原型链目前是实现继承的常用的主要方法。**理论：一个构造函数，有一个prototype属性，指向其原型对象，原型对象拥有一个constructor属性指针，指向该构造函数。如果将构造函数的prototype属性的指针不在指向其原型对象，而是另一个对象的实例，则该构造函数的实例 可以通过内部属性，访问原型对象，此时访问的就是另一个对象的实例了，这样就形成了简单的继承关系。

例子：

function Super(){
    this.property = true;
}
Super.prototype.getSuperValue = function (){
    return this.property;
}
function Sub(){
    this.subProperty = false;
}
Sub.prototype = new Super();
Sub.prototype.getSubValue = function (){
    return this.subProperty;
}
var sub = new Sub();
console.log(sub.getSuperValue());

可以看看sub对象的输出 ，sub.prototype指向Super的实例，后面的相当于在super实例上添加一个方法