作为前端,你须要晓得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的递归组件