原型部分
简单创建一个构造函数与实例:
function Person() {
}
Person.prototype.name = 'Zhar';
Person.prototype.age = 30;
Person.prototype.say = function(){
console.log(this.name);
}
var person1 = new Person();
var person2 = new Person();
console.log(person1.name) // Zhar
console.log(person2.name) // Zhar
Person 为构造函数
person是Person 的一个实例对象
1、instanceof
instanceof 用于判断一个对象是否是另一个对象的实例(该方法在原型链中依然有效)
注:instance 为例子,实例的意思
console.log(person1 instanceof Person);//true
console.log(person2 instanceof Person);//true
var arr = new Array();
console.log(arr instanceof Array);//true
2、prototype
每个函数都有一个prototype属性(只有函数才有)
函数的 prototype属性指向了该构造函数创建的实例的原型(是实例的原型,而不是函数的原型)。
3、constructor
默认情况下,所以原型对象都会自动获得一个constructor(构造器)属性,这个属性指向构造函数。
原型是什么?
每一个对象都有一个与之关联的'原型’对象,每一个对象都会从原型继承属性
如何访问对象的原型?
在ECMA中,并没有规定直接访问对象原型的方法,但 Firefox/Chrome/safari 在每一个对象上都有一个proto属性来访问原型对象。
4、_proto__
console.log(Person.prototype);
console.log(person);
console.log(person.__proto__);
__proto__
存在于实例与构造函数的原型对象之间,而不是存在于实例与构造函数之间
- 小结
- 构造函数的prototype属性和实例的proto指向构造函数的原型
- 构造函数原型的constructor(构造器)指向该构造函数
5、isPrototypeOf
可通过object1.isPrototypeOf(object2)来判断一个对象是否存在于另一个对象的原型链中,即 object1 是否存在于 object2的原型链中。换句话讲:判断 object2是否有一个指针指向 object1。
Person.prototype.isPrototypeOf(person1);//true
Person.prototype.isPrototypeOf(person2);//true
6、getPrototypeOf(ES5)
返回一个对象的原型
一些判断:
person.__proto__ === Person.prototype;//true
person.__proto__.constructor === Person.prototype.constructor;//true
person1.__proto__ === person2.__proto__;//true
person1.say === person2.say;//true
Object.getPrototypeOf(person1) === Object.getPrototypeOf(person2);//true
Object.getPrototypeOf(person1) === Person.prototype;//true
7、hasOwnProperty
通过hasOwnProperty(propertyName)来检测一个属性是存在于实例还是原型中
console.log(person1.hasOwnProperty("name"));//false;
person1.name = "newName";
console.log(person1.hasOwnProperty("name"));//true
8、in
通过in关键字可以判断某个对象是否包含某个属性,而不管这个属性是属于实例还是原型
console.log("name" in person1);//true;
person1.name = "newName";
console.log("name" in person1);//true
通过 hasOwnProperty() 与 in 相结合,可精确定位一个属性是属于原型还是实例
8、keys(obj) ES5
keys(object)方法可返回对象所有可枚举属性的字符串数组
console.log(Object.keys(person1));//[]
person1.name = "newName";
console.log(Object.keys(person1));//["name"]
console.log(Object.keys(Person.prototype));//[ 'name', 'age', 'say' ]
keys()返回的是该对象的属性数组,并不包含其构造函数上的属性
继承部分
1、原型链式继承
让一个函数的原型对象(funtion.prototype)指向另一个原型的指针(实例.__ proto__),而另一个原型中也包含指向另外一个构造函数的指针,依此层层嵌套,形成原型链
function Animal() {
this.topType = "脊椎动物";
}
Animal.prototype.getTopType = function(){
return this.topType;
}
function Person() {
this.secondType = "人类";
}
Person.prototype = new Animal();
Person.prototype.getSecondType = function(){
return this.secondType;
}
var person = new Person();
console.log(person.topType+"--"+person.secondType);//脊椎动物--人类
在上面的例子中,Person.prototype=new Animal() 即是将 Animal 实例赋给了 Person.prototype
结合前面原型中的讲解,new Animal 产生一个 Animal 实例,该实例对象有一个_proto_指向其构造函数的prototype,将该实例赋值给 Person 的原型,意味着Person的原型 既拥有了 Animal 的所有实例属性或方法,还包含了一个指向 Animal的原型的指针。
缺点
1.引用数据类型问题
在JS面向对象一节中,我们曾经尝试将引用数据类型赋值给原型的属性(参见创建对象一节的原型模式),结果出现实例间相互影响,在原型继承时,也会出现此问题,观察下例:
function Person(){
this.desc = ["北京"];
}
function Student(){}
Student.prototype = new Person();
var s1 = new Student();
var s2 = new Student();
s1.desc.push("昌平");
console.log(s1.desc);//[ '北京', '昌平' ]
console.log(s2.desc);//[ '北京', '昌平' ]
Person 函数含有一个desc 属性,则 Person的实例会包含各自的一个 desc 属性。但此时的 Student 通过原型链继承了 Person,Student 的 prototype 则变成了 Person 的一个实例,则 Student 就拥有了一个 desc 属性,相当于使用 Student.prototype.desc=[…]为 Student 添加了这样一个原型属性,结果显而易见。
2.传参问题
通过前面的代码,会发现,在使用原型链继承时,无法向父级构造函数传递参数
2、借用构造函数式继承
通过使用 call 或 apply 来实现借用式继承
call 或 apply :更改函数执行的上下文环境
function Person(name){
this.name = name;
}
function Student(name){
Person.call(this,name);
}
var student = new Student("zhar");
console.log(student.name);//zhar
上面的代码中,使用了 call,在 Student 的实例环境中调用了 Person 构造函数,更改了 Person 的 this 指向为当前实例环境,最终 Student的实例就拥有了 name 属性
优势
可以在调用构造函数时,向'父级'传递参数,如上例中一样,在调用 Person 时传入了 name 值
劣势
无法继承原型属性或方法
function Person(name){
this.name = name;
}
Person.prototype.say = function(){
console.log(this.name);
}
function Student(name){
Person.call(this,name);
}
var student = new Student("zhar");
console.log(student.name);//zhar
student.say();//报错 student.say is not a function
3、组合继承
将原型链式继承与借用构造函数式继承组合在一起,结合二者的优势。通过原型链实现对原型属性或方法的继承,通过借用构造函数实现对实例属性的继承。
function Person(name){
this.name = name;
}
Person.prototype.say = function(){
console.log(this.name);
}
function Student(name){
Person.call(this,name);
}
Student.prototype = new Person();
var student = new Student("zhar");
console.log(student.name);//zhar
student.say();//zhar