原型和原型链以及继承

2018-03-03 本文已影响19人 YM雨蒙

在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())

原型和原型链以及继承

原型链

继承

猜你喜欢

热点阅读