类、构造函数以及js的继承方法

已于 2022-07-22 10:21:03 修改
阅读量167 收藏 1
点赞数
文章标签： javascript 前端 开发语言
于 2022-07-19 09:53:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53261199/article/details/125865656
版权

类的语法结构（ES6中新增）

  • 类的语法结构和构造函数非常相似
    • 构造函数的语法结构
    function Person(name, age) {
    this.name = name
    this.age = age
    this.say = function () {
        console.log('hello')
    }
}

const p = new Person('top',28)
console.log(p) // Person {name: 'tom', age: 28}
p.say() // hello
    • 类的语法结构
    class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    // 注意：写成类的形式以后，say()就可以不用this.say = function(){}的形式了，当然写成this.say的形式也可以
    say() {
        console.log('hello')
    }
}
const p = new Person('tom', 28)
console.log(p) // Person {name: 'tom', age: 28}
p.say() // hello
    • 都是需要new，只不过class多了一个constructor构造函数函数

类的继承 extends

  1. 继承父类的普通函数
class Father {
    say() {
        console.log('hello')
    }
}
class Son extends Father {
    // 这里面可以不写say方法，完全继承父类的，调用的时候向上查找找到父类的
    // say() {
    //     super.say()
    // }
}
const s = new Son()
s.say() // hello
  • 继承父类的普通函数的同时也可以拥有自己的普通函数（方法）
class Father {
    say() {
        console.log('hello')
    }
}
class Son extends Father {
    // 子类自己的方法
    sing() {
        console.log('唱歌')
    }
}
const s = new Son()
s.say() // hello
s.sing() // 唱歌
  1. 继承父类的构造函数
  • 切记：调用父类的构造函数constructor里面的属性必须用super关键字
class Father {
    constructor(x, y) {
        this.x = x
        this.y = y
    }
    sum() {
        console.log(this.x + this.y);
    }
}
class Son extends Father {
    constructor(x, y) {
        super(x, y) // 必须要加
    }
}
const s = new Son(1, 2)
console.log(s) // Son {x: 1, y: 2}
s.sum() // 3  这里就是继承父类的普通函数

类里面的this指向问题

  1. constructor里面的this指向实例对象
class Father {
    constructor() {
        console.log(this)
    }
}
const f = new Father()
// 输出 Father {}  因为是Father进行实例化，所以constructor里面的this就指向Father的实例对象f

class Father {
    constructor() {
        console.log(this)
    }
}
class Son extends Father {

}
let s = new Son()
// 输出 Son {} 因为是Son进行实例化，所以constructor里面的this就指向Son的实例对象s
  1. 方法里的this指向这个方法的调用者

  • Father的实例对象f调用时：

    class Father {
    say() {
        console.log(this) 
    }
}
const f = new Father()
class Son extends Father {

}
let s = new Son()
f.say()
// 输出 Father {}  说明this确实指向的是Father的实例对象f

  • Son的实例对象s调用时

    class Father {
    say() {
        console.log(this);
    }
}
const f = new Father()
class Son extends Father {

}
const s = new Son()
s.say()
// 输出 Son {}  说明this确实指向的是Son的实例对象s

  • 综合上面两点做个题：

class Father {
    constructor(name, age) {
        this.name = name
        this.age = age
        console.log('1', this)
    }
    say() {
        console.log('2', this)
    }
}
let f = new Father('ls', 30)
class Son extends Father {
    constructor(name, age) {
        super(name, age)
    }
}
let s = new Son('zs', 8)
s.say()
f.say()

// 1 Father {name: 'ls', age: 30}
// 1 Son {name: 'zs', age: 8}
// 2 Son {name: 'zs', age: 8}
// 2 Father {name: 'ls', age: 30}
  • 总结：谁进行实例化，constructor里面的this就指向实例化的对象，谁调用类里面的函数，函数里面的this就指向哪一个实例化对象

构造函数和原型链（ES5）

  1. 构造函数中的静态成员：在构造函数本身上添加的成员，只能由构造函数本身访问
function Person(name, age) {
    this.name = name
    this.age = age
}
Person.sex = 'male'
let p = new Person('zs', 30)
console.log(p.sex)  // undefined
console.log(Person.sex)  // male
  1. 构造函数中的实例成员：在构造函数内部创建的对象成员，只能由实例化的对象来访问
function Person(name, age) {
    this.name = name
    this.age = age
}
let p = new Person('zs', 30)
console.log(p.name)  // zs
console.log(Person.name)  // 访问不到
  1. 原型对象prototype
  2. 对象原型__proto__
  3. 原型链

1、利用构造函数继承（.call）

优点：
1、可以继承父级的本身上的属性和方法，并且可以给父级传值；也可以有自己的属性和方法。

function Father(name, age) {
    this.name = name
    this.age = age
    this.arr = [1, 2, 3]
    this.go = function () {
        console.log('go')
    }
}
function Son(name, age, hobby) {
    Father.call(this, name, age, hobby)
    this.hobby = hobby
}
let s = new Son('zs', 40, 'eat')
console.log(s.name, s.age, s.arr, s.hobby)
s.go()

// 输出：
// zs 40 [1, 2, 3] eat
// go

2、在子级上更改继承过来的引用属性不会影响到父级的原本属性，多个子例也相互独立

function Father() {
    this.arr = [1, 2, 3]
}
function Son() {
    Father.call(this)
}
let s = new Son()
let s1 = new Son()
let f = new Father()
s.arr.push(4)
s1.arr.push(5)

console.log(s.arr)
console.log(s1.arr)
console.log(f.arr)

// 输出：
// [1, 2, 3, 4] 
// [1, 2, 3, 5]
// [1, 2, 3]

缺点：
1、由于是通过构造函数生成的对象，所以继承父级的方法每次都是全新的，即不能复用父级方法（引用属性）

function Father() {
    this.go = function () {
        console.log('go')
    }
}
function Son() {
    Father.call(this)
}
let s = new Son()
let s1 = new Son()
console.log(s.go == s1.go)

// 输出：
// false

2、继承不了父级原型对象上的方法（call方法其实就是在构造函数的原型上挂载一个方法）

function Father(name) {
    this.name = name
}
Father.prototype.go = function () {
    console.log('go')
}

function Son(name) {
    Father.call(this, name)
}
let s = new Son('zs')
console.log(s.go)
Father.prototype.go()

// 输出：
// undefined
// go

2、利用原型链继承（将父级的实例对象作为子级的原型对象）

优点：
1、可以继承父级原型上的方法，且可复用

function Father() {

}
Father.prototype.go = function () {
    console.log('go')
}

function Son() {

}

Son.prototype = new Father()
// 要切记修正constructor指向，因为s的构造函数终究是要指向Son的
Son.prototype.constructor = Son
let s = new Son()
let s1 = new Son()
s.go()
console.log(s.go === s1.go)
// 因为s和s1都指向同一个原型对象，也就是此时的Father构造函数的实例对象

// 输出：
// go
// true

2、子级可以在自己的原型上挂载方法，且是独有的，父级获取不到

function Father() {

}
Father.prototype.go = function () {
    console.log('go')
}

function Son() {

}

Son.prototype = new Father()
Son.prototype.constructor = Son

// 这里要注意，先把实例挂载到Son的原型上，然后再再原型上挂载方法
Son.prototype.eat = function () {
    console.log('eat')
}

let s = new Son()
console.log(Son.prototype)
console.log(Father.prototype)

// 输出：
// Father {constructor: ƒ, eat: ƒ}
// {go: ƒ, constructor: ƒ}

// 可以看到Son的原型上可以访问到eat和Father上的go
// 但是Father的原型上只能访问到go

缺点：
1、子级无法传递参数给父级
2、子级修改了继承过来的父级属性中的引用属性后，所有用过这个引用属性的子级都会跟着改变

function Father() {
    this.arr = [1, 2, 3, 4, 5]
}

function Son() {

}

Son.prototype = new Father()
// 要切记修正constructor指向，因为s的构造函数终究是要指向Son的
Son.prototype.constructor = Son
let s = new Son()
let s1 = new Son()

s.arr.push(6)
console.log(s.arr)
console.log(s1.arr)

// 输出：
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5, 6]
 
// 因为这两个实例都是由Son创造出来的，所以这两个实例共用一个原型对象，一个发生改变了，全都发生改变

3、利用组合继承（构造函数 + 原型链）

核心：利用构造函数传递父级本身的属性，并且也可以传递参数；利用与原型链传递共用的方法，让所有子级复用。
优点：
1、保留了构造函数的优点：创建子类实例，可以向父类构造函数传参
2、保留了原型链的优点：父类的方法定义在父类的原型对象上，可以实现方法复用
3、不共享父类的引用属性，比如arr属性

缺点：调用了两次父级的构造函数，第一次是call，将父级属性和方法拷贝一份，作为子级的实例属性，第二次是new Father，把创造出来的实例作为子级的原型对象，但是Son.prototype上父级属性和方法会被第一次拷贝过来的实例属性屏蔽，所以多余

function Father(name) {
    this.name = name
    this.arr = [1, 2, 3]
}
Father.prototype.go = function () {
    console.log('go')
}

function Son(name) {
    Father.call(this, name)
}

Son.prototype = new Father()
Son.prototype.constructor = Son
let s = new Son('zs')
let s1 = new Son()
// 说明可以向父级传递参数
console.log(s.name) // zs
s.arr.push(66)     
// 说明父级本身上的引用类型不是复用的，相互独立
console.log(s.arr)  // [1, 2, 3, 66]
console.log(s1.arr)  // [1, 2, 3]
// 说明父级原型上的方法都可以继承到
s.go() // go
s1.go() // go
// 说明方法可以复用，一变全变
console.log(s.go === s1.go) // 
// 可以看出不管是Son还是Father的构造函数指向都是正确的
console.log(Son.prototype.constructor) // Son 的构造函数
console.log(Father.prototype.constructor) // Father的构造函数

4、组合继承优化1

将父级的原型对象直接赋给子级的原型对象，也就是说二者共用一个原型对象

优点：
1、保留了构造函数的优点：创建子类实例，可以向父类构造函数传参
2、保留了原型链的优点：父类的方法定义在父类的原型对象上，可以实现方法复用
3、不共享父类的引用属性，比如arr属性
4、只调用一次父级构造函数

缺点：
子级和父级的构造函数指向同一个原型对象，当修改子级构造函数的指向之后，父级构造函数的指向也会随之变化。

function Father(name) {
    this.name = name
    this.arr = [1, 2, 3]
}
Father.prototype.go = function () {
    console.log('go')
}

function Son(name) {
    Father.call(this, name)
}

Son.prototype = Father.prototype
Son.prototype.constructor = Son
let s = new Son('zs')
let s1 = new Son()
// 说明可以向父级传递参数
console.log(s.name) // zs
s.arr.push(66)     
// 说明父级本身上的引用类型不是复用的，相互独立
console.log(s.arr)  // [1, 2, 3, 66]
console.log(s1.arr)  // [1, 2, 3]
// 说明父级原型上的方法都可以继承到
s.go() // go
s1.go() // go
// 说明方法可以复用，一变全变
console.log(s.go === s1.go) // 
// 可以看出Father的构造函数指向是错误的，因为上面修改了指向为Son
console.log(Son.prototype.constructor) // Son 的构造函数
console.log(Father.prototype.constructor) // Son的构造函数

5、组合继承优化2（寄生组合继承）

将父级构造函数的原型对象复制一份赋到子级的原型对象上，而父级原本的原型对象不受干扰

优点：
1、保留了构造函数的优点：创建子类实例，可以向父类构造函数传参
2、保留了原型链的优点：父类的方法定义在父类的原型对象上，可以实现方法复用
3、不共享父类的引用属性，比如arr属性
4、只调用一次父级构造函数
5、构造函数的指向不发生错误

function Father(name) {
    this.name = name
    this.arr = [1, 2, 3]
}
Father.prototype.go = function () {
    console.log('go')
}

function Son(name) {
    Father.call(this, name)
}

Son.prototype = Father.prototype
Son.prototype.constructor = Son
let s = new Son('zs')
let s1 = new Son()
// 说明可以向父级传递参数
console.log(s.name) // zs
s.arr.push(66)     
// 说明父级本身上的引用类型不是复用的，相互独立
console.log(s.arr)  // [1, 2, 3, 66]
console.log(s1.arr)  // [1, 2, 3]
// 说明父级原型上的方法都可以继承到
s.go() // go
s1.go() // go
// 说明方法可以复用，一变全变
console.log(s.go === s1.go) // 
// 可以看出不管是Son还是Father的构造函数指向都是正确的
console.log(Son.prototype.constructor) // Son 的构造函数
console.log(Father.prototype.constructor) // Father的构造函数
tptx
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js定义类 对象 构造函数，类的继承
08-08
NULL 博文链接：https://wenzongliang.iteye.com/blog/2163551
js中构造函数的继承
进一步，有一步的欢喜。
04-29 2498
js 构造函数的继承例子学习
js实现继承的几种方式
leilei7407的博客
07-25 5617
原型链继承 借用构造函数来继承 构造函数+原型链 组合继承 寄生组合式继承 原型式继承 寄生式继承 class+extends继承 （1）原型链继承 核心：创建父类实例对象作为子类原型 优点：可以访问父类原型上的方法或属性，实现了方法复用 缺点：创建子类实例时，不能传父类的参数（比如name）， 子类实例共享了父类构造函数的属性值， (2)构造函数继承 核心：在子构造函数中调用父构造函数 优点：解决了原型继承的缺点 （使用构造函数来继承可以传父类的参数，可以解决子类共享父类构造函数中属性的问题.
关于 class 的实现与继承
the_f54a的博客
10-25 168
或者类表达式中，以创建一个类，该类是另一个类的子类。关键字用来创建一个普通类或者内建对象的子类。
JavaScript 原型继承之构造函数继承
10-28
JavaScript 是基于原型的面向对象语言。也就是说，每个实例对象都具有一个原型。对象从该原型中继承属性和方法。这一篇将具体说说构造函数的继承。
JS继承之借用构造函数继承和组合继承
11-22
借用构造函数继承  在解决原型中包含引用类型值所带来问题的过程中，开发人员开始使用一种叫做借用构造函数(constructor stealing）的技术（有时候也叫做伪造对象或经典继承）。这种技术的基本思想相当简单，即在...
JavaScript如何借用构造函数继承
01-21
这篇文章主要介绍了JavaScript如何借用构造函数继承,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 借用构造函数继承是在子类型构造函数的内部调用超类型构造...
JavaScript中使用构造函数实现继承的代码
10-28
JavaScript中借用构造函数实现继承的代码，需要的朋友可以参考下。
JS继承之构造函数继承
安歌
09-05 2889
构造函数继承的精华是子类中SuperClass.call(this)语句了 function Shape(id) { this.name = 'shape'; this.id = id; this.toString = function() {return this.name;}; } Shape.prototype.showName = function() {return...
js类的继承-构造函数继承和原型链继承（图解）
难安前端的艰难学习的博客
11-06 335
javaScript类的继承 1.构造函数继承 2.原型链继承 3.组合继承 1.构造函数继承 function Dog(name,age){ this.name=name; this.age=age; this.sayName=function(){ console.log("my name is"+this.name) } var d1=new Dog("...
js构造函数（继承方法及利弊）
weixin_33694172的博客
07-26 1108
js构造函数 *前言：上篇文章介绍了js中通过构造函数来实例化对象的各种方法js构造函数，这篇文章主要介绍构造函数的继承（类的继承），同样包括 ES5 和 ES6 两部分的介绍，能力所限，文中难免有不合理或错误的地方，还望各位大神批评指正~ 原型 首先简单介绍一下实例属性/方法 和 原型属性/方法，以便更好理解下文 function Pe...
JavaScript 继承父类方法的正确姿势
Archiver的博客
08-02 1440
JavaScript 继承父类方法的正确姿势 不想看前期的介绍可以直接划到最下面看总结和正确姿势，跳过原因的讲解。 初学 js ，总是喜欢把方法直接定义在对象内部，类似于 Java 那样。 下面定义一个简单 js 对象。 function Person() { var locVal = '冲冲冲'; this.info = function () { ...
JavaScript中class继承之后父级和子级原型的关系
dreamjay1997的博客
12-11 502
class Component {} class Greeting extends Component {} 上面的例子，Greeting继承Component意味着 一. Greeting.__proto__ ===  Component 二. Greeting.prototype.__proto__ === Component.prototype 也就是说 new Greeting(...
class 原生js获取父元素_原生js获取class
weixin_32902659的博客
12-28 2171
//使用原生js时，通过class名称就可以得到相应的class名称标签组封装的函数//定义一个函数getClass(oParent,aClass);function getClass(oParent,aClass){　　　　　　　　　　　　　//oParent为要获取的className的父级元素对象var aEle = document.getElementsByTagName('*');　　...
解决 JS 对象中继承性问题之方式一：通过原型链继承来解决继承问题
狮子座的男孩
12-23 308
Ⅰ、继承问题： 1、什么是继承？ 答：子类去继承父类的东西，称之为继承； 如：子类继承父类的属性或方法等； 2、常见的继承方式有哪些？ 答：继承方式有五种： 其一、原型链继承; 其二、构造函数继承(也称 call 继承)； 其三、拷贝继承； 其四、组合继承(某一种或多种继承方式的组合)； 其五、寄生式组合继承； Ⅱ、五大继承的优缺点： 1、原型链继承的优缺点： 其一、优点： A、实现相对简单； B、通过子类实例可以直接访问父类原型链上和实例上的成员(即：实现了继承)； 其二、缺点： A、子类实例修改引用类型
JS构造函数继承---------通过call或者apply继承父级属性
weixin_41376400的博客
02-14 700
父级构造函数 function Father(){       this.type = "人类"; } 子级构造函数 function Son(name,age) {        this.name = name;        this.age = age } 如果使子级继承父级 方法1：call或者apply。如果需要传参按照call和apply的传参即可。 function Son(nam...
JS中的构造函数及继承
生活步步是坎坷，笑到最后是大哥
07-17 877
一 js中的构造函数 1. 面向对象对象的创建方式：a.通过new object（）； var stu=new Student(); b.字面量创建对象 var p={ Name:”张三”; Age:23; Run:function(){ } }; c.先定义对象，后添加数据 Var person={ }; Person.name=”张三“； Person.sge=23; 构造函数 ...
js 继承父构造函数的属性和方法
weixin_37457661的博客
07-27 328
ES6之前没有extends，可以通过构造函数 + 原型对象实现继承，叫组合继承 call() 调用这个函数，并修改函数运行时this指向 fun.call(thisArg,aeg1,aeg2....) thisArg 调用函数的this的指向对象 aeg1,aeg2 传递参数 调用函数 function fn(x,y){ console.log(this); console.log(x + y); } var star = { name : "刘德华" } fn.call(.
用js构造函数cat，继承方法Animal
最新发布
03-25
注意，在构造函数 `Cat` 中，我们使用了 `call` 方法调用了 `Animal` 的构造函数，以继承 `Animal` 的属性。在 `Cat.prototype` 中，我们使用了 `Object.create` 方法来将 `Animal.prototype` 所指向的原型链传递到 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值