位置: IT常识 - 正文
js实现继承属性和方法(js实现继承属性功能)
编辑：rootadminjs实现继承属性和方法 js实现继承属性和方法1 使用extends实现继承2 原型链继承3 组合继承4 寄生组合继承5 实例继承6 拷贝继承7 扩展7.1 函数中方法定义在函数内部、函数外、prototype上的区别7.2 class创建实例与构造函数创建实例
本文链接地址:https://www.jiuchutong.com/zhishi/299660.html
转载请保留说明！
推荐整理分享js实现继承属性和方法(js实现继承属性功能)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:js继承几种方式,js实现继承属性功能,js继承的三种方法,js继承如何实现,js 继承实现,js继承的三种方法,js继承的三种方法,js继承几种方式,内容如对您有帮助，希望把文章链接给更多的朋友！
首先定义一个父类
function Animal (name, age) { this.name = name this.age = age this.eat = function () { console.log('吃', this.name, this.age) }}Animal.prototype.drink = function () { console.log('喝', this.name, this.age)}// 实验一下const test = new Animal('狗', 3)test.eat()test.drink()console.log(test)运行结果
1 使用extends实现继承最简便的继承方式，仅支持ES6+
class Dog extends Animal { constructor(name, age, breed) { super(name, age) this.breed = breed } cry () { console.log('叫', this.name, this.age, this.breed) }}// 实验一下 const dog = new Dog('狗', 3, '田园犬'); dog.eat() dog.drink() dog.cry() console.log(dog)实验结果
2 原型链继承function Dog (name, age, breed) { Animal.call(this, name, age); this.breed = breed; this.cry = function () { console.log('叫', this.name, this.age, this.breed) }}Dog.prototype = new Animal()Dog.prototype.constructor = Dog// 实验一下const dog = new Dog('狗', 3, '田园犬');console.log(dog)dog.eat()dog.drink()dog.cry()实验结果
3 组合继承function Dog (name, age, breed) { Animal.call(this, name, age); this.breed = breed; this.cry = function () { console.log('叫', this.name, this.age, this.breed) }}Dog.prototype = Object.create(Animal.prototype)Dog.prototype.constructor = Dog// 实验一下const dog = new Dog('狗', 3, '田园犬');console.log(dog)dog.eat()dog.drink()dog.cry()实验结果
4 寄生组合继承function Dog (name, age, breed) { Animal.call(this, name, age); this.breed = breed; this.cry = function () { console.log('叫', this.name, this.age, this.breed) }}(() => { let Super = function () { }; Super.prototype = Animal.prototype; Dog.prototype = new Super(); Dog.prototype.constructor = Dog;})();// 实验一下const dog = new Dog('狗', 3, '田园犬');console.log(dog)dog.eat()dog.drink()dog.cry()实验结果
5 实例继承function Dog (name, age, breed) { let dog = new Animal(name, age); dog.breed = breed; dog.cry = function () { console.log('叫', this.name, this.age, this.breed) } return dog}// 实验一下const dog = new Dog('狗', 3, '田园犬');console.log(dog)dog.eat()dog.drink()dog.cry()实验结果
6 拷贝继承function Dog (name, age, breed) { let animal = new Animal(name, age); for (let key in animal) { this[key] = animal[key] } this.breed = breed; this.cry = function () { console.log('叫', this.name, this.age, this.breed) }}// 实验一下const dog = new Dog('狗', 3, '田园犬');console.log(dog)dog.eat()dog.drink()dog.cry()实验结果
7 扩展7.1 函数中方法定义在函数内部、函数外、prototype上的区别挂载在函数内部的方法，实例内部会复制构造函数的方法挂载在原型上的方法，不会去复制。挂载在内部和原型上的方法都是可以通过实例去调用的一般来说，如果需要访问构造函数内部的私有变量，我们可以定义在函数内部，其他情况我们可以定义在函数的原型上在函数外定义的方法，只能用类调用函数位置调用方式结果构造函数内函数名直接调用报错函数外函数名直接调用正常执行函数外 prototype上函数名直接调用报错构造函数内实例化对象调用正常执行函数外实例化对象调用报错函数外 prototype上实例化对象调用正常执行7.2 class创建实例与构造函数创建实例function exa1 (name, age) { this.name = name this.age = age this.innerFunc = function () { console.log('inner') } } exa1.prototype.outerFunc = function () { console.log('prototype') } exa1.getClassName = function () { console.log('example') } class exa2 { constructor(name, age) { this.name = name this.age = age } innerFunc = function () { console.log('inner') } outerFunc () { console.log('prototype') } static getClassName () { console.log('example') } } console.log(new exa1(), new exa2())上一篇：前端实战｜React18项目启动——pc端极客园项目前置准备(前端实战培训)
下一篇：ChatGPT加强版GPT-4面世，打工人的方式将被颠覆(gpt3 plug)
