JavaScript中 prototype 原型继承

在这里插入图片描述

原型继承

说到原型继承,那就是要从原型入手,就让我们来简单回顾一下什么是原型吧

原型概述:每个函数身上都有一个原型,我们称之为原型对象
函数的 prototype 属性指向原型对象,原型对象上的 constructor 指回构造函数

那么顾名思义,原型继承那就要从原型下手啦 ! !

function Person() {
  this.uname = '张三', 
  this.age = 22
}
// 原型对象
Person.prototype.sex = '男'
Person.prototype.head = 1
Person.prototype.sayName = function () {
  console.log('hello javascript')
}

function Son() {
    this.eye = 2
}

// 把构造函数 Person 的实例化对象赋值给构造函数 Son 的原型对象,那么在构造函数 Person 原型上添加的属性或者方法, Son的实例对象也是可以访问到的,这正是原型链起到的作用
Son.prototype = new Person()

// 实例化对象
let per = new Son()
console.log(per)

// 可以访问原型对象上添加的属性
per.sayName()

sayName 方法定义在了构造函数 Person 的原型上,而通过构造函数 Son 的实例对象却能够访问得到,那么 sayName 方法相当于定义在了 Son 原型对象的原型对象上,之所以 Son 的实例化对象能够访问得到,那正是原型链的功劳

通过 per.sayName() 可以在控制台看到打印结果 'hello javascript'

上面代码运行,打印 Son 的实例化对象 per ,可以看到如下图, 正是 (Son.prototype = new Person()) 让 Son 的原型对象变成了构造函数 Person 的实例对象 new Person(), 而且 Person 的原型对象上也有我们自己定义的属性方法, 并且它的 constructor 指回 构造函数 Person

在这里插入图片描述


喜欢的小伙伴,点个赞再走呗 !!
  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript ,实现继承方法有以下几种方式: 1. 原型继承:利用原型链实现继承。通过将父类的实例作为子类的原型,子类就可以访问到父类的属性和方法。例如: ```javascript function Parent() { this.name = 'parent'; } Parent.prototype.sayName = function() { console.log(this.name); } function Child() {} Child.prototype = new Parent(); var child = new Child(); child.sayName(); // 输出:parent ``` 2. 构造函数继承:利用 call 或 apply 方法将父类构造函数的作用域赋给子类。这种方式可以实现多继承。例如: ```javascript function Parent(name) { this.name = name; } function Child(name) { Parent.call(this, name); } var child = new Child('child'); console.log(child.name); // 输出:child ``` 3. 组合继承:结合原型继承和构造函数继承,既可以继承父类的属性和方法,又可以实现子类实例的独立。例如: ```javascript function Parent(name) { this.name = name; } Parent.prototype.sayName = function() { console.log(this.name); } function Child(name, age) { Parent.call(this, name); this.age = age; } Child.prototype = new Parent(); Child.prototype.constructor = Child; var child = new Child('child', 18); console.log(child.name); // 输出:child console.log(child.age); // 输出:18 child.sayName(); // 输出:child ``` 4. 原型继承:利用 Object.create() 方法创建一个新对象,以某个对象原型,然后再对新对象进行修改。例如: ```javascript var parent = { name: 'parent', sayName: function() { console.log(this.name); } }; var child = Object.create(parent, { name: { value: 'child' } }); child.sayName(); // 输出:child ``` 5. 寄生式继承:与原型继承类似,但是在增强对象的方法时使用了一个函数封装。例如: ```javascript var parent = { name: 'parent', sayName: function() { console.log(this.name); } }; function createChild(original) { var child = Object.create(original); child.sayName = function() { console.log('hello, ' + this.name); } return child; } var child = createChild(parent); child.sayName(); // 输出:hello, parent ``` 需要注意的是,在实现继承时应该注意避免出现属性和方法的重复定义,以及避免在父类的原型修改引用类型的属性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值