#yyds干货盘点# 【js学习笔记三十二】前端原型和原型链构造函数的使用

简介: #yyds干货盘点# 【js学习笔记三十二】前端原型和原型链构造函数的使用

前言


我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷


导语


前端原型和原型链构造函数的使用

图片.png

代码部分

function Father(name) {
        this.name = name
      }
      Father.prototype.dance = function () {
        console.log('I am dancing')
      }
      function Son(name, age) {
        Father.call(this, name)
        this.age = age
      }
      Son.prototype = Father.prototype
      //为子类添加方法
      Son.prototype.sing = function () {
        console.log('I am singing')
      }
      let son = new Son('小红', 100)
      //此时父类也被影响了
      console.log(Father.prototype,"father") //{dance: 
ƒ, sing: ƒ, constructor: ƒ}



利用Son.prototype = Father.prototype改变原型指向,但此时我们给子类增加原型方法,同样会影响到父类。


{dance:

ƒ, sing: ƒ, constructor: ƒ}

代码部分

function Father(name) {
        this.name = name
      }
      Father.prototype.dance = function () {
        console.log('I am dancing')
      }
      function Son(name, age) {
        Father.call(this, name)
        this.age = age
      }
      Son.prototype = new Father()
      Son.prototype.sing = function () {
        console.log('I am singing')
      }
      let son = new Son('小红', 100)
      console.log(Father.prototype,"Father") //{dance: ƒ, 
constructor: ƒ}

总结



子类的原型指向父类的实例,这样就可以顺着原型链共享父类的方法了。并且为子类添加原型方法的时候,不会影响父类。

相关文章
|
19天前
|
前端开发 JavaScript 网络协议
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
40 5
|
JavaScript 前端开发 Java
深入JS面向对象(原型-继承)(一)
深入JS面向对象(原型-继承)
31 0
|
1月前
|
JavaScript
js开发:请解释什么是ES6的类(class),并说明它与传统构造函数的区别。
ES6的类提供了一种更简洁的面向对象编程方式,对比传统的构造函数,具有更好的可读性和可维护性。类使用`class`定义,`constructor`定义构造方法,`extends`实现继承,并可直接定义静态方法。示例展示了如何创建`Person`类、`Student`子类以及它们的方法调用。
22 2
|
1月前
|
JavaScript 前端开发
js开发:请解释原型继承和类继承的区别。
JavaScript中的原型继承和类继承用于共享对象属性和方法。原型继承利用原型链查找属性,节省内存但不支持私有成员。类继承通过ES6的class和extends实现,支持私有成员但占用更多内存。两者各有优势,适用于不同场景。
19 0
|
1月前
|
JavaScript 前端开发 Java
纯前端JS实现人脸识别眨眨眼张张嘴案例
纯前端JS实现人脸识别眨眨眼张张嘴案例
48 0
|
5天前
|
JavaScript
什么是js的原型链
什么是js的原型链
|
22天前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
|
1月前
|
JSON JavaScript 前端开发
Node.js:前端开发的后端利器
Node.js作为一种运行在服务器端的JavaScript环境,为前端开发者打开了后端开发的大门。它以其高效的事件驱动、非阻塞I/O模型以及强大的npm生态,使得前端开发者能够轻松构建服务器端应用,实现前后端的全栈开发。本文将探讨Node.js的核心优势、应用场景以及在前端开发中的重要性。
|
8月前
|
Web App开发 前端开发 JavaScript
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
95 0
|
8月前
|
前端开发 定位技术
前端学习笔记202305学习笔记第二十三天-地图单线程配置
前端学习笔记202305学习笔记第二十三天-地图单线程配置
64 0
前端学习笔记202305学习笔记第二十三天-地图单线程配置