JS实现继承的六种方式 心已赠人 2022-12-25 11:53 59阅读 0赞 // 第一种方式:对象冒充(不推荐) // 注意:此种继承方式对象实例化后在编译器中继承对象(children)不会代码提示父类的方法(parent) // function Parent(username) { // this.username = username // this.getUsername = function () { // console.log(this.username) // } // } // function Children(username, password) { // this.ext = Parent // this.ext(username) // delete this.ext // this.password = password // this.getPassword = function () { // console.log(this.password) // } // } // const parent = new Parent('father') // const child = new Children('child', 'password') // parent.getUsername() // father // child.getUsername() // child // child.getPassword() // password // 第二种方式:通过call方式继承(不推荐) // 注意:此种继承方式对象实例化后在编译器中继承对象(children)不会代码提示父类的方法(parent) // function test(str) { // console.log(this.name + "\t" + str) // } // const obj = Object.create(null) // obj.name = 'zhangsan' // test.call(obj, 'lihai') // function Parent(username) { // this.username = username // this.hello = function () { // console.log(this.username) // } // } // // function Child(username, password) { // Parent.call(this, username) // this.password = password // this.world = function () { // console.log(this.password) // } // } // // const parent = new Parent('zhangsan') // const child = new Child('lisi', 'nihao') // parent.hello() // child.hello() // child.world() // 第三种方式: 通过apply方式继承(不推荐) // 注意:此种继承方式对象实例化后在编译器中继承对象(children)不会代码提示父类的方法(parent) // function Parent(username) { // this.username = username // this.hello = function () { // console.log(this.username) // } // } // // function Child(username, password) { // // Parent.apply(this, new Array(username)) // 与下面结果一致 // Parent.apply(this, [username]) // // Parent.apply(this, Array.prototype.slice.call(username)) // 与下面结果一致 // // Parent.apply(this, [...username]) // this.password = password // this.world = function () { // console.log(this.password) // } // } // // const par = new Parent('zhangsan') // const child = new Child('lisi', 'hah') // par.hello() // child.hello() // child.world() // 第四种方式: 通过原型链继承(推荐) // 注意:此种方式可以通过编译器显示继承方法 // function Parent() { // } // Parent.prototype.hello = 'hello' // Parent.prototype.sayHello = function () { // console.log(this.hello) // } // // function Child() { // } // Child.prototype = new Parent() // Child.prototype.world = 'world' // Child.prototype.sayWorld = function () { // console.log(this.world) // } // // const parent = new Parent() // const child = new Child() // parent.sayHello() // child.sayHello() // child.sayWorld() // 第五种:混合方式(强烈推荐) // function Parent() { // } // Parent.prototype.hello = 'hello' // Parent.prototype.sayHello = function () { // console.log(this.hello) // } // // function Child(hello, world) { // Parent.call(this, hello) // this.world = world // } // Child.prototype = new Parent() // Child.prototype.sayWorld = function () { // console.log(this.world) // } // // const parent = new Parent() // const child = new Child('hello', 'world') // parent.sayHello() // child.sayHello() // child.sayWorld() // 第六种:ES6继承 class Parent { constructor(hello) { this.hello = hello } sayHello() { console.log(this.hello) } } class Child extends Parent{ constructor(hello, world) { super(); this.hello = hello this.world = world } sayWorld() { console.log(this.world) } } const parent = new Parent('hello') const child = new Child('hello', 'world') parent.sayHello() child.sayHello() child.sayWorld()
还没有评论,来说两句吧...