Prototype 以及继承

Prototype

prototype是用于连接实例化的proto属性的.在构造函数被实例化之后,如果为构造函数添加函数或者变量,只能够通过构造函数的prototype属性进行添加.

1.如果在构造函数中直接写函数,例如查询函数,那么当构造函数被实例化时,每个实例化对象都包含了一个独立的查询函数,从性能上出现了代码冗余.这种情况,只需要在构造函数里建立基本的构造属性即可,实例化后,构造属性在内存中都会独立划分一块区域.而查询函数,只需要在构造函数的prototype中进行添加,这样所有实例化的函数通过proto属性链接构造函数的prototype,就都能使用这个查询函数查询对应内存区域实例化后的属性了.

2.如果实例化后的多个实例化对象,需要公用一个变量.为其增加数字递增函数,通过递增的函数来操作一个统计变量,从而实现多实例化公用函数和公用变量,也只需要在构造函数中的prototype对应增加函数和变量即可,这里需要注意的是,公用函数操作公用变量,不能使用this进行操作.具体查看demo

// 2. prototype 
/**
* beline 构造函数 在构造函数中建立最基本的构造属性
*/
function beline(id, name) {
  this.id = id
  this.name = name
}

/**
* prototype 实例化对象的__proto__属性 和 构造函数的 prototype连接
* 为构造函数的prototype添加函数或变量,实际上是为实例化的所有函数对象添加共有函数
*/
beline.prototype.getInfo = function() {
  return {
    id: this.id,
    name: this.name
  }
}

// 实例化两个beline对象分别是user 和 user2
let user = new beline(1,'beline')
let user2 = new beline(2,'tang')

// 通过实例化获取的构造函数prototype.getInfo获取构造函数内的变量
console.log(user.getInfo())
console.log(user2.getInfo())

// =======================================================
/**
* 给构造函数的prototype增加一个共有变量
* 然后添加一个共有方法来增加共有变量的数值
* 然后再添加一个共有方法来获取这个变量进行验证
**/ 
// 添加一个统计变量 num ,初始值为0
beline.prototype.num = 0

// 添加一个 共有函数add 用来增加num变量的数值
beline.prototype.add = function () {
beline.prototype.num ++
}

// 添加一个共有函数shownum 来验证实例化之后的函数分别调用add后,是否都能够对同一个变量起作用
beline.prototype.shownum = function() {
return beline.prototype.num
}
let p1 = new beline('3', 'zhang')
let p2 = new beline('4', 'li')
console.log(p1.shownum(), 'add前') // 0
p1.add() 
console.log(p1.shownum(), 'add1次') // 1
p2.add()
console.log(p1.shownum(), 'p2add') // 2
console.log(p2.shownum(), 'p2num') // 2
/**
* 从p1和p2分别调用prototype中的add函数,可以发现,prototype中的函数和变量是所有实例化对象共有的,切不重复占用内存
* 而构造函数中的私有变量,则在每次实例化的时候都会划分新的内存区域,相对都是独立的
**/ 
/**
* 继承
* 关键词 call()
* 在需要继承其他函数的函数中,使用被继承函数调用call方法 传入 this以及对应的参数 
* 同时需要把扩展的参数以this的形式赋值即可
*/ 
function children(id,name,age) {
beline.call(this, id, name)
this.age = age
}

/**
* 继承后的函数依然可以当做其他构造函数来使用,为其添加prototype
* 注意:继承后的函数不具备被继承的函数的prototype
* 需要另外给新函数增加prototype使用
*/
children.prototype.getInfo = function() {
  return{
    id: this.id,
    name: this.name,
    age: this.age
  }
}
let c1 = new children(3,'xiaozhang', 3)
console.log(c1.getInfo()) // 正确获得数据

继承

关键字:call()
往往在项目中一个原型对象不能够满足业务需求,需要在其基础上进行扩展.但是又不想复制代码又写一遍的时候.我们可以通过在新的函数中调用原型函数,通过原型函数调用call方法,传入this,以及对应的参数,即可实现继承,同时继承后的这个函数还需要把扩展的部分在函数体内实现即可.
此demo和前面的prototype的demo公用一个原型 beline函数.完整代码在上面,此处只针对继承部分进行列出

/**
* 继承
* 关键词 call()
* 在需要继承其他函数的函数中,使用被继承函数调用call方法 传入 this以及对应的参数 
* 同时需要把扩展的参数以this的形式赋值即可
*/ 
function children(id,name,age) {
  beline.call(this, id, name)
  this.age = age
}

/**
* 继承后的函数依然可以当做其他构造函数来使用,为其添加prototype
* 注意:继承后的函数不具备被继承的函数的prototype
* 需要另外给新函数增加prototype使用
*/
children.prototype.getInfo = function() {
  return{
    id: this.id,
    name: this.name,
    age: this.age
  }
}
let c1 = new children(3,'xiaozhang', 3)
console.log(c1.getInfo()) // 正确获得数据

Prototype 以及 继承

Prototype

继承

Prototype 以及继承