IT教程 ·

作为前端,你须要晓得javascript完成继续的要领

纪录一下本身写PHP程序时走过的一些坑

在ES6之前,javascript不跟其他言语一样,有直接继续的要领,它须要借助于组织函数+原型对象模仿完成继续。如今我们能够应用ES6的extends要领完成继续,假如想相识更多有关ES6完成的继续请检察《》,在这里不再做更多的引见。

ES6之前并没有给我们供应extends继续,我们能够经由过程组织函数+原型对象模仿完成继续,被称为组合继续。

1. call()

挪用这个函数,而且修正函数运行时的this指向

fun.call(thisArg, arg1,arg2,...)
  • thisArg:当前挪用函数this的指向对象
  • arg1, arg2:通报的一般参数
function fn() {
console.log('前端岚枫') 
  console.log(this)
}
fn.call() //申明call()能够挪用函数,this指向window
var obj = {
    name: 'lanfeng
}
fn.call(obj) //this指向obj, 申明call能够转变this指向

2. 借用组织函数继续父范例属性

中心头脑:经由过程call()把父范例的this指向子范例的this,如许就能够完成子范例继续父范例的属性。

// 借用父组织函数继续属性
//父组织函数
function Father (uname, age) {
  //this指向父组织函数的对象实例
    this.uname = uname
  this.age = age
}
// 子组织函数
function Son (uname, age){
  // this指向子组织函数的对象实例
  //借助于call,this指向子组织函数对象实例
  Father.call(this, uname, age)
  
}
var son = new Son('王俊凯',18)
console.log(son) //

3. 借用原型对象继续父范例要领

// 父组织函数
function Father (uname, age) {
  //this指向父组织函数的对象实例
    this.uname = uname
  this.age = age
}
// 父原型要领
Father.prototype.money = function() {
    console.log(10000)
}
// 子组织函数
function Son (uname, age){
  // this指向子组织函数的对象实例
  //借助于call,this指向子组织函数对象实例
  Father.call(this, uname, age)
  
}

// Son.prototype = Father.prototype 如许直接赋值会有问题,假如修正了子原型对象,父原型对象也会变化/
Son.prototype = new Father()

//手动改constructor指回本来的组织函数
Son.prototype.constructor = Son  
Son.prototype.exam= function() {
 console.log('测验')
}
var son = new Son('王俊凯',18)
console.log(son) //
son

构造关联如下图:

总结

本日重要分享了call()要领的用法和javascript经由过程组织函数+原型对象模仿完成继续的体式格局。
假如想相识更多请扫描二维码

谈谈Vue的递归组件

参与评论