在js中, 原型链是一个很重要的东西, 但是却因为它的难度使很多人难以掌握, 所以写下文章总结一下, 舍弟掌握它, 要了解原型链,我们先看看什么是原型
javascript 中的对象有一个特殊的[[prototype]]内置属性, 其实就是对于其他对象的引用.
我们创建的每一个函数都有一个prototype属性, 这个属性是一个指针, 指向一个对象, 对象的用途是包含可以由特定类型的所有实例共享的属性和方法.
看代码:
# 对象的这些属性和方法是实例共享的
function Person(){}
Person.prototype.name = "yym"
Person.prototype.age = "24"
var person = new Person()
console.log(person.name) // "yym"
var person1 = new Person()
console.log(person1.name) // "yym"
console.log(person.name == person1.name) // true
- 理解原型对象
无论什么时候,只要创建了新函数, 就会有一组特定的规则为该函数创建一个
prototype属性, 这个属性指向函数的原型对象, 默认情况下, 所有原型对象都会自动获得一个constructor(构造函数)属性, 这个属性是指向prototyp属性所在的指针
# 前面的例子
console.log(Person.prototype.constructor === Person) // true
console.log(Person.prototype.constructor) // Person
console.log(person.constructor === Person) // true
console.log(person1.__proto__ === Person.prototype) // true
console.log(person1.__proto__.constructor === person1.constructor) // true
[站外图片上传中...(image-86768e-1520086189953)]
特别要注意的是prototype与__proto__的区别，prototype是函数才有的属性，而__proto__是每个对象都有的属性。(__proto__不是一个规范属性，只是部分浏览器实现了此属性，对应的标准属性是[[Prototype]])
虽然在所有实现都无法访问到
__proto__, 但可以通过isPrototypeOf()来确定对象之间是否存在这种关系
__proto__指向调用isPrototypeOf()方法的对象(Person.prototype),返回true
// ES3
console.log(Person.prototype.isPrototypeOf(person)) //true
console.log(Person.prototype.isPrototypeOf(person1)) // true
// ES5 Object.getPrototypeOf() // 返回 __proto__ 的值
console.log(Object.getPrototypeOf(person) === Person.prototype) //true
console.log(Object.getPrototypeOf(person).name) // "yym"
hasOwnProperty()方法可以检测一个属性是存在于实例中,还是原型中(它是从Object继承来的)
console.log(person.hasOwnProperty("name")) // false 来自原型
person.name="yangyumeng" // 来自实例
console.log(person.hasOwnProperty("name")) // true
原型与 in 操作符
有两种方式使用
in操作符: 单独使用 和 在for-in中使用, 单独使用时,in操作符会在通过对象能够访问给定属性时返回true,无论是实例中还是原型中.
console.log(person1.hasOwnProperty("name")) //false
console.log("name" in person1) //true 在原型中
person1.name = "杨雨" //"杨雨"
console.log(person1.name) //来自实例
console.log(person1.hasOwnProperty("name")) //true
console.log("name" in person1) //true
- 在通过
for-in循环时.返回的是所有能够通过对象访问的 可枚举(enumerated)属性,其中既包括存在于实例中的,也包括原型中的属性 - 要取得对象上所有可枚举的实例属性,
ES5中Object.keys()方法,接受一个对象作为参数,返回字符串数组 - 如果想要得到所有实例属性,无论是否可枚举, 可使用
Object.getOwnPropertyNames()
var key = Object.keys(Person.prototype)
console.log(key) // ["name", "age"]
var key = Object.getOwnPropertyNames(Person.prototype)
console.log(key) // ["constructor", "name", "age"]
原型链
什么是原型链?
- 每个构造函数都有原型对象；每个对象都会有构造函数；每个构造函数的原型都是一个对象；那么这个原型对象也会有构造函数；那么这个原型对象的构造函数也会有原型对象；这样就会形成一个链式的结构，称为原型链。
属性搜索原则
a.当访问一个对象的成员的时候，会现在自身找有没有,如果找到直接使用，
b.如果没有找到，则去当前对象的原型对象中去查找，如果找到了直接使用，
c.如果没有找到，继续找原型对象的原型对象，如果找到了，直接使用
d.如果没有找到，则继续向上查找，直到Object.prototype，如果还是没有，就报错
person1的原型链
person1 ----> Person.prototype ----> Object.prototype ----> null
函数也是一个对象，所以，Person的原型链是：
Person ----> Function.prototype ----> Object.prototype ----> null
原型链关系
这里需要特别注意的是：所有函数的原型都是Function.prototype,包括Function构造函数和Object构造函数（如图中的标红部分）
继承
- 组合继承
// 伪经典继承,原型链和借用构造函数
function Person(name, age){
this.name = name
this.age = age
}
Person.prototype.sayName = function(){
console.log(this.name)
}
function student(name, age){
//继承属性
Person.call(this, name)
this.age = age
}
//继承方法
student.prototype = new Person()
student.prototype.constructor = student
student.prototype.sayAge = function(){
alert(this.age)
}
- 原型式继承
//原型式继承
function Object(o){
function F(){} //创建构造函数
F.prototype = o //传入的对象作为构造函数的原型
return new F() // 返回实例
}
var person = {
name: "yym",
friends: ["a", "b"]
}
var anotherPerson = Object(person)
//ES5规范了原型式继承
var person = {
name: "yym",
friends: ["a", "b"]
}
var anotherPerson = Object.create(person)
- 寄生式继承
//寄生式继承
//创建一个仅用于封装继承过程的函数,和工厂模式类似
function Object(o){
function F(){} //创建构造函数
F.prototype = o //传入的对象作为构造函数的原型
return new F() // 返回实例
}
function createAnother(original){
var clone = Object(original) //通过调用函数创建一个新对象
clone.sayHi = function(){ // 以某种方式增强这个对象
console.log("hi")
}
return clone // 返回这个对象
}
var person = {
name: "yym",
friends: ["a", "b"]
}
var anotherPerson = createAnother(person)
console.log(anotherPerson.sayHi())
网友评论