说说原型链和继承

116 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第29天,点击查看活动详情

题外话

这个疫情啊,真滴是服气了,居家快一个月了,居家不是办公就是做饭,脑子都快麻木了,为了活跃自己的大脑,也为了帮助大家增长知识,我给大家分享一点冷知识,嘿嘿嘿……

冷知识:全世界的蚂蚁数量要远远高于人类的数量,但你知道吗?虽然蚂蚁很小,但地球上蚂蚁的总重量,其实也高于全人类的总重量。

咳咳~进入正题吧

正文

image.png

先对枚举和可枚举进行一个补充说明

Object.defineProperty()默认添加的属性都是不可枚举的

let obj = {
  name"abc",
  age18
}

Object.defineProperty(obj, "sex", {
  value"woman"
})

console.log(obj);  //{ name: 'abc', age: 18 }

当我们将枚举属性改为

Object.defineProperty(obj, "sex", {
  value"woman",
  enumerabletrue
})

//{ name: 'abc', age: 18, sex: 'woman' }

继承

补充说明完毕之后,我们开始说说最长呗问到的继承,其实继承在js里是没有一个系统的说明的,因为JS没有类的概念,但是他仿照其他后端语言也约定俗成一个类的概念。也没有详细的关于继承的方法,所以我们通常采用其他特性来完成继承。

先来认识一个面向对象的三大特征

面向对象

  • 封装:将属性和方法封装到一个类中,就可以叫做封装的过程
  • 继承:继承是面向对象中非常重要的,不仅仅可以减少重复代码的数量,也是多态的前提
  • 多态:不同的对象在执行时表现出不同的形态

原型链

之前有几章博客说过原型链,这里就不再详细的叙述了,我们简单的总结一下:

**每个对象都存在一个[[prototype]属性,也叫做隐式原型,可以使用浏览器提供的__proto__属性查看。

函数是一个特殊的对象,还拥有一个prototype属性。每个构造函数都有一个原型对象,也就是实例的原型。原型对象上有一个constructor属性会指回构造函数。实例对象会通过[[prototype]]内部指针指向原型对象,可以使用浏览器提供的__proto__查看.**

继承

1. 原型链继承

将子类的 prototype 指向父类的实例
特点:

  1. 继承来的属性看不到
  2. 父类的属性被所有所实例继承
  3. 子类无法给父类传参
function Father() {
  this.fname = "father"
}

Father.prototype.running = function () {
  console.log(this.fname + " running");
}

function Child() {
  this.cname = "child"
}

//这个顺序不能改变,因为这样study这个方法才是绑定到Father上的
Child.prototype = new Father()

Child.prototype.study = function () {
  console.log(this.name + " studing");
}

let child = new Child()
console.log(child.fname);  //father

image

  1. 继承的属性看不到:因为打印只打印自身的属性
let child = new Child()
console.log(child);  //Father { cname: 'child' }

console.log(child.fanme);  //father
  1. 父类的属性被所有实例所继承
//引用类型属性被修改,实例对象之间会影响
var child1 = new Child()
var child2 = new Child()

child1.frineds.push("xiaobai")

console.log(child1.frineds);  //[ 'xiaobai' ]
console.log(child2.frineds);  //[ 'xiaobai' ]

//直接修改对象上的属性,实例对象之间不会影响
var child1 = new Child()
var child2 = new Child()

child1.fname = "xiaobai"

console.log(child1.fname);  //xiaobai
console.log(child2.fname);  //father