原型和原型链

208 阅读3分钟

构造函数

原型离不开构造函数

1.构造函数分为 实例成员 和 静态成员

实例成员:实例成员就是构造函数内部,通过this添加的成员,实例成员只能通过实例化的对象来访问

静态成员:在构造函数本身上添加的成员,只能通过构造函数来访问

function Star(name,age){
   //实例成员
   this.name = name
   this.age = age
}
//静态成员
Star.sex = '女'

let stars = new Star('小红',18)
console.log(stars);   //Star{name:'小红',age:18}
console.log(stars.sex)  //undefined

console.log(Star.name)  //通过构造函数无法直接访问实例成员
console.log(Star.sex)  //女  通过构造函数可以访问静态成员

2. 实例化

 function Father(name){
   this.name = name
 }
 let son = new Father('lisa')
 console.log(son)   //{name:'lisa'}

此时son就是一个新对象

2.1

new一个新对象的过程

1.创建一个空对象 son{}

2.为空对象准备原型链连接 son.proto = Father.prototype

3.重新绑定this,使构造函数的this指向新对象
Father.call(this)

4.为新对象属性赋值

  1. 返回this return this,此时新对象就拥有了构造函数的方法和属性了

2.2 每个实例的方法是共享的吗

构造函数上定义的方法 不共享 通过原型添加的方法 共享

//1)   构造函数上定义的方法   不共享
 function Star(){
   this.sing = function(){
   console.log('我爱唱歌')
   }
 }
 let stu1 = new Star();
 let stu2 = new Star();
 stu1.sing() //我爱唱歌
 stu2.sing() //我爱唱歌
 console.log(stu1.sing === stu2.sing)  //false
 
 2) 原型上创建的方法   共享
 function Star(name){
   this.name = name
 }
 Star.prototype.sing = function(){
  console.log(this.name + '爱唱歌')
 }
 let stu1 = new Star('小红')
 let stu2 = new Star('小兰')
 stu1.sing()   //小红爱唱歌
 stu2.sing()   //小兰爱唱歌
 console.log(stu1.sing === stu2.sing)  //true

2.3 实例的属性为基本类型时,不存在共享问题,是否相同看值

 let stu1 = new Star('小红')
 let stu1 = new Star('小红')
 console.log(stu1.name === stu2.name); //true
 
 let stu1 = new Star('小红')
 let stu1 = new Star('小兰')
 console.log(stu1.name === stu2.name); //false

2.5 定义构造函数的规则

公共属性定义到构造函数里面,公共方法放到原型上

原型

1.原型是什么

prototype就是原型,它是一个对象

2.原型作用

原型的作用就是共享方法

3.原型中this的指向

原型中this指向的是实例

原型链

1.原型链是什么

原型与原型层层相链节的过程就是原型链

2.原型链的作用

对象可以使用构造函数prototype原型对象的属性和方法,就是因为对象有__proto__原型的存在

function Star(name,age){
  this.name = name
  this.age = age
}
Star.prototype.dance = function(){
  console.log("我在跳舞" + this.name)
}
let obj = new Star("小明",24)
console.log(obj.__proto__ === Star.prototype)  //true

3.原型的查找方式

1)首先看obj对象身上是否有dance方法,如果有则执行

2)如果没有dance方法,就去构造函数原型对象身上找

3)如果原型中页没找到dance,就去object原型对象身上取找dance方法

4)如果再没有,则会报错

面试题

1)

Object.prototype.__ptoto__    //null
Function.prototype.__proto__  //Object.prototype
Object.__proto__   //Function.prototype

按照如下要求实现 Peoson 和Student对象

1.Student 继承 Person

2.Person 包含一个实例变量 name 包含一个方法 printName

3.Student 包含一个实例变量 score 包含一个方法 printScore

4.所有Person和Student对象之间共享一个方法

  function Person (name){
    this.name = name
    this.printName = function(){
    console.log(this.name)
    }
  }
  
  Person.prototype.commentMethods = function(){
    console.log("共享的方法")
  }
  
  function Student(name,score){
    Person.call(this,name)
    Student.printScore = function(){
     console.log(this.score)
    }
  }
  
  Student.prototype = new Person();
  
  let person = new Person('小明')
  let student = new student('小兰',100)
  //false
  console.log(student.printName === person.printName)
  //true
  console.log(student.commentMethods === person.commentMethods)