原型 原型对象 原型链

在面向开发对象开发过程中对每一个实例添加方法,会使每一个对象都存在该添加方法造成空间浪费

通过对原型添加公共的属性或方法,使所有实例对象都可访问

原型为了共享公共的成员 prototype

原型: JS为每个构造函数提供一个属性prototype(原型),它的值是一个对象,prototype也叫原型对象

constructor属性,原型对象的默认属性->原型对象的构造函数

复制代码
function Cat(name, age) {
        this.name = name
        this.age = age
}
 Cat.prototype.eat = function () {
        console.log('猫吃老鼠')
      }
Cat.prototype.nation = 'china'

      const cat1 = new Cat('加菲猫', 3) // {name:  '',age: ,eat}
      const cat2 = new Cat('银渐层', 4) // {name: '',age: ,eat() {}}
      console.log(cat1.age)
      console.log(cat1.nation)
      cat1.eat()
      cat2.eat()
      console.log(cat1.eat === cat2.eat) // true
console.log(Cat.prototype)
      console.log(Cat.prototype.constructor === Cat) // true

 console.log(Array.prototype.constructor === Array) //  true
      const arr = [] //  new  Object()
      console.log(arr.constructor === Array) // true
      console.log(arr.constructor === Array.prototype.constructor) // true
      console.log(arr.constructor) // 访问arr数组对象的constructor,会到原型去访问

      console.log(Object.prototype.constructor) // Object ;
      const obj = {}
      console.log(obj.constructor) // Object
      const obj2 = { a: 1 }
      console.log(obj.constructor === obj2.constructor) // true

访问对象成员的原则: 先查找自己身上有没有,有的话就使用,没有去原型查找

prototype->原型对象 proto 原型

constructor属性,原型对象的默认属性->原型对象的构造函数

每个对象都有一个__proto__属性,指向原型对象

复制代码
 function Person(name, age) {
        this.name = name
        this.age = age
      }

      Person.prototype.say = function () {
        console.log('saying')
      }

      const p1 = new Person('小明', 20)
      console.log(p1.name)
      p1.say()
   
      console.log(p1.__proto__)
      console.log(p1.constructor.prototype.constructor)

      console.log([].__proto__) // Array.prototype  {constructor: Array,...}
      console.log([].__proto__.constructor) // Array
      console.log([].constructor) // Array

      console.log('123'.constructor) //  String
      console.log(Array.prototype) 
      const arr   = [1,2,3]
      arr.push(4)

数组拓展方法

复制代码
 Array.prototype.getSum = function () {
        console.log(this) // this 指向getSum调用着->实例对象
        let sum = 0
        this.forEach(function (item) {
          sum += item
        })
        return sum
      }
      const arr = [1, 2, 3]
      const arr2 = [10, 3, 4]
      arr2.getSum()
      const res = arr2.getSum()
      console.log(res)

对象访问成员的机制

1 首先查找自身有没有,有就就近原则使用

2 自身没有该成员,通过__proto__找到原型对象,看原型对象上有没有,有就执行

3 假如原型对象上也没有,再找原型对象的__proto__ ,一直找到Object.prototype

4 一直找到Object.prototype,找不到就undefined

每一个实例对象又有一个proto属性,指向的构造函数的原型对象,构造函数的原型对象也是一个对象,也有proto属性,这样一层一层往上找就形成了原型链

Date.now() 静态方法

Array.isArray

Array.from

str.substring()

Object.assign

相关推荐
宁雨桥5 小时前
前端修行日记之JS 原型与 AI基础常识
前端·javascript·原型模式
清水白石0082 天前
生成器不是性能银弹:什么时候该用 `yield` 省内存,什么时候它会拖慢 Python 数据处理吞吐?
开发语言·python·原型模式
梦想画家3 天前
唤醒沉睡的数据:ERP销售模块接入Apache AGE实战指南
知识图谱·原型模式
Alex艾力的IT数字空间3 天前
再思“把事情做对”与“把事情做好”的辩证关系与先后顺序
信息可视化·需求分析·学习方法·抽象工厂模式·远程工作·原型模式·中介者模式
likerhood10 天前
设计模式:原型模式(Prototype Pattern)java版本
java·设计模式·原型模式
geovindu14 天前
go: Prototype Pattern
开发语言·设计模式·golang·原型模式
幸运小圣15 天前
Array.prototype.reduce 全面解析【JS方法】
开发语言·javascript·原型模式
两年半的个人练习生^_^17 天前
每日一学:设计模式之原型模式
java·开发语言·设计模式·原型模式
UXbot18 天前
如何用 AI 快速生成完整的移动端 UI 界面:从描述到交付的实操教程
前端·ui·交互·ai编程·原型模式
神の愛19 天前
js的深拷贝和浅拷贝?啥情况讲解下??底层堆栈空间??object.prototype.toString.call(),还有bind,的具体使用?
前端·javascript·原型模式