Day 27 27.1 JS进阶-Function对象之prototype对象

发布时间 2023-04-27 16:09:25作者: Chimengmeng

JS-Function对象之prorotype原型对象

  • 案例1:
// 创建方式1
var foo = new Function("console.log('hello world!')")
foo()

// 创建方式2
function Person() {
      console.log("hello person")
  }

var p1 = Person()
console.log(p1)

var p2 = new Person()
console.log(p2)

【1】什么是JS原型对象?

  1. prototype(原型对象)就是一个容器. {}
  2. 存放公共的方法给对象使用.
  3. 对象可以直接访问原型对象中的方法和属性.
  4. 原型对象类似Python的类对象(fn.prototype)

【2】原型对象和函数之间的关系.

  • 每个函数都会有一个prototype属性,指向原型对象.
  • 每个原型对象都会有一个constructor属性,指向函数.
  • 总结:每个函数与原型对象之间的关系是互相引用.

【3】对象和原型对象和函数之间的关系

  • 函数创建对象var o = new Fn();
  • 对象通过__proto__属性,指向原型对象.
  • 对象可以直接调用原型对象中所有的属性和方法.
  • 对象可以通过原型对象中的constructor属性知道构造函数
  • 总结: 原型对象就是一个容器,帮助函数存放公共方法,以及给函数new出来的对象提供公共方法使用.

function Dog(name, age) {
    this.name = name;//面试题:构造函数中的this指向谁? 答:指向new创建的对象
    this.age = age;
    this.sleep = function () {
        console.log("sleeping")
    }

}

// Dog("rain",12) // 普通函数
//构造函数
let alex = new Dog("alex", 36);   // 使用new来创建对象
let eric = new Dog("eric", 35);   // 使用new来创建对象

// (1) 函数对象通过prototype容器设置公共属性和方法
Dog.prototype.eat = function (food) {
    console.log(this.name +"吃"+ food);
}

alex.eat("吃骨头")
eric.eat("吃肉")

// (2) 对象通过`__proto__`属性,指向原型对象
console.log(alex.__proto__)
console.log(alex.__proto__.constructor.name)
console.log(alex.__proto__.constructor)

// 看看能不能理解
console.log(alex.__proto__ === Dog.prototype)
console.log(Dog.prototype)

alex.age = 100
console.log(alex.age) // 先查找自己的空间,找不到,去原型中找
console.log(eric.age)

// 猜一猜1
Dog.prototype.sleep =function (){
    console.log("prototype sleeping")
}

alex.sleep()

// 猜一猜2
let zhangSan = new Dog("张三", 35);
Dog.prototype = {
    fly:function (){
        console.log("flying...")
    }
}
// let zhangSan = new Dog("张三", 35);
// zhangSan.fly()
zhangSan.eat("辣条")