js之继承

js之继承

1、原型 prototype 和 proto

  • 每个对象都有一个__proto__属性,并且指向它的prototype原型对象
  • 每个构造函数都有一个prototype原型对象
  • prototype原型对象里的constructor指向构造函数本身

    作用:实例对象的__proto__指向构造函数的prototype,从而实现继承。prototype对象相当于特定类型所有实例对象都可以访问的公共容器

示例

javascript 复制代码
function Person(nick, age){
    this.nick = nick;
    this.age = age;
}
Person.prototype.sayName = function(){
    console.log(this.nick);
}

var p1 = new Person('Byron', 20);

var p2 = new Person('Casper', 25);

p1.sayName()  // Byron

p2.sayName()  // Casper

p1.__proto__ === Person.prototype       //true

p2.__proto__ === Person.prototype   //true

p1.__proto__ === p2.__proto__           //true

Person.prototype.constructor === Person  //true

2、原型链

javascript 复制代码
arr.__proto__ === Array.prototype
true
Array.prototype.__proto__ === Object.prototype
true
arr.__proto__.__proto__ === Object.prototype
true

// 原型链的终点
Object.prototype.__proto__ === null
true

原型链如下:

javascript 复制代码
arr ---> Array.prototype ---> Object.prototype ---> null

这就是传说中的原型链,层层向上查找,最后还没有就返回undefined

3、继承

继承是指一个对象直接使用另外一个对象的属性方法

javascript 复制代码
function Person (name, age) {
    this.name = name
    this.age = age
}

// 方法定义在构造函数的原型上
Person.prototype.getName = function () { console.log(this.name)}

定义Teacher构造函数

javascript 复制代码
function Teacher (name, age, subject) {
    Person.call(this, name, age)
    this.subject = subject
}

原理

javascript 复制代码
Teacher.prototype = Object.create(Person.prototype)

Teacher.prototype.constructor
ƒ Person(name, age) {
    this.name = name
    this.age = age
}

---

Teacher.prototype.constructor = Teacher
ƒ Teacher(name, age, subject) {
    Person.call(this, name, age)
    this.subject = subject
}

继承方法的最终方案

javascript 复制代码
Teacher.prototype = Object.create(Person.prototype)
Teacher.prototype.constructor = Teacher

4、hasOwnProperty

在原型链上查询属性比较耗时,对性能有影响,试图访问不存在的属性时会遍历整个原型链。

遍历对象属性时,每个可枚举的属性都会被枚举出来。 要检查是否具有自己定义的属性,而不是原型链上的属性,必须使用hasOwnProperty方法。
hasOwnProperty 是 JavaScript 中唯一处理属性并且不会遍历原型链的方法。

相关推荐
岁岁种桃花儿7 分钟前
Vue组件化编程第二篇:非单位件组件
前端·javascript·vue.js
晓得迷路了11 分钟前
栗子前端技术周刊第 146 期 - React 19.3、jQuery 1.0 20 周年、Bun 1.4.2...
前端·javascript·react.js
雪芽蓝域zzs11 分钟前
第四十四节:封装通用表格多选、批量操作组合式函数
前端·javascript·vue.js
ljt272496066112 分钟前
Vue笔记--路由
javascript·vue.js·笔记
CoderYanger32 分钟前
Java EE 进阶:2.3 JavaScript 综合案例
java·前端·javascript·css·职场和发展·java-ee·html
摸鱼仙人~1 小时前
Vue 核心知识体系(大厂秋招方向)
前端·javascript·vue.js
mldong1 小时前
Node 开发者也有自己的轻量工作流引擎了:npm i 一行,5 分钟跑通一条审批流
javascript·后端·typescript
多加点辣也没关系10 小时前
JavaScript|第31章:表单与控件
开发语言·javascript·ecmascript
Highcharts.js13 小时前
常见报错排雷指南2:导出失败的官方解法
javascript·react.js·ecmascript·highcharts·可视化图表·导出模块失败·导出服务
梦想平凡14 小时前
百游棋牌源代码开发搭建教程(五):房间创建、座位分配与请求幂等实现
前端·javascript·数据库·源代码管理