前端路线--JS高阶（day05）

最新推荐文章于 2024-07-12 10:43:17 发布
最新推荐文章于 2024-07-12 10:43:17 发布
阅读量183 收藏
点赞数
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yan9_9/article/details/123617846
版权

类的创建

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		/*类的创建：1.类名首字母大写	
				   2.有constructor构造器
				   3.类的本质是函数
				   4.定义方法直接在类中写方法名,方法直接属于原型对象。
		  */
		class Person{
			//实例化对象
			constructor(name,age) {
			    this.name=name;
				this.age=age;
			}
			//原型方法
			say(x){
				console.log(this.name+',我在说话,'+x);
			}
		}
		var p1=new Person('小谷',10);
		console.log(p1);
		p1.say(10);
	</script>
</html>

新的继承方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
//------------------------------------------------------------------------------------------------
		//1.新的继承方式
		//父亲
		class Father{
			constructor(name,age) {
			    this.name=name;
				this.age=age;
			}
			say(){
				console.log('我调用了父亲的say');
			}
		}
		
		//孩子
		class Son extends Father{
			//无参的构造函数会自己生成
			sleep(){
				console.log('我在睡觉');
			}
		}
		var son1=new Son('小谷',10);
		son1.sleep();
		son1.say();
		console.log(son1);
		
		
		
//-------------------------------------------------------------------------------------------------
		//2.旧的继承方式
		function Father2 () {
			this.run=function(){
				console.log('父亲的跑步');
			}
		}
		function Son2(){
			//改变父亲的this指向
			Father2.call(this);
		}
		//继承的原型链
		Son2.prototype=new Father2();
		Son2.prototype.constructor=Son2;
		//孩子的原型对象的方法
		Son2.prototype.eat=function () {
				console.log('孩子吃东西');
			}
			
		var son2=new Son2();
		console.log('-------------');
		son2.run();
		son2.eat();
		console.log(son2);
	</script>
</html>

super关键字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		//父亲
		class Father {
			constructor(name, age) {
				this.name = name;
				this.age = age;
			}
			play(){
				console.log('我在打孩子');
			}
			eat(){
				console.log('我吃的是父亲的食物');
			}
		}
		Father.prototype.shout='999';
		//孩子
		class Son extends Father {
			constructor(name, age, sex) {
				//super()  必须放在子构造器的第一行，用来调用父构造器
				super(name, age);
				this.sex = sex;
				//若想定义的方法不是属于其原型对象，则需要在其构造器中去定义
				this.study=function () {
					console.log('我是son自身的方法,是成员属性');
				}
			}
			say(){
				console.log('我是孩子的say方法,属于原型对象的');
				//调用父类的原型对象的方法
				super.play();
				console.log(super.shout);
			}
			eat(){
				console.log('我吃的是孩子的食物');
			}
		}
		var son = new Son('小好', 10, '女');
		son.study();
		son.say();
		//若子类和父类有相同的方法，则会执行子类的方法，即就近原则。
		son.eat();
		console.log(son);
		
		// super总结:
		/* 
		 1.必须放在子构造器的第一行，用来调用父构造器
		 2.若子类没有你声明构造器，系统会自己创建和调用无参的构造器
		 3.super只能调用父类的原型对象的属性(需要在类外用Father.prototype.属性名='值')和方法(定义在类里的constructor下的)
		 4.若子类和父类有相同的方法，则会执行子类的方法，即就近原则,可以重写父类的方法。
		 */
	</script>
</html>
喝西瓜汁的兔叽Yan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
FE21-JS-DAY05-Vendula-Martin
03-10
【标题】"FE21-JS-DAY05-Vendula-Martin" 是一个与JavaScript相关的学习资源，可能是一个课程或者工作坊的第五天内容，由Vendula和Martin共同讲授。这个主题可能涵盖了JavaScript的进阶概念，因为通常在几天的学习...
FE21-JS-DAY02-Vendula-Bettina
03-04
【描述】"FE21-JS-DAY02-Vendula-Bettina"的描述为空，但我们可以推测这是针对前端开发者（FE）的2021年课程系列的一部分，特别是针对JavaScript语言的第二天教学内容。可能涉及了前一天的基础知识回顾，并深入介绍...
前端路线--JS高阶（day02）
Yan9_9的博客
03-14 1384
实例成员和静态成员 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script type="text/javascript"> //构造方法 function Person (name,age) { this.name=
前端进阶学习——JS高级
jyn15159的博客
07-13 1328
JS高级 1. 两大编程思想 1.1. 面向过程 面向过程：POP(Process-oriented programming) 面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。 示例：把大象放到冰箱，面向过程的做法： 打开冰箱—> 2. 放入大象—> 3. 关上冰箱 1.2. 面向对象 面向对象：OOP (Object Oriented Programming) 面向对象是把事务分解成为一个个对象，然后由对象
JavaScript 高阶函数
m0_54829066的博客
12-22 163
常见的 JavaScript 高阶函数包括 map、filter、reduce 等，这些函数都可以对数组进行操作，并且可以传入一个函数作为参数来定制具体的操作方式。JavaScript 中的高阶函数是指可以接受函数作为参数或返回函数作为返回值的函数。它可以帮助我们实现抽象、灵活地处理函数，是函数式编程的重要工具。高阶函数的使用可以帮助我们写出更加简洁、抽象的代码，是函数式编程的重要工具。这些函数都是高阶函数，因为它们可以接受函数作为参数，并且本身也是函数。
前端知识点之JS中的高阶函数
PrototypeOne的博客
05-19 1303
JS中的高阶函数 高阶函数是指以函数作为参数的函数，并且可以将函数作为结果返回的函数。 接受一个或多个函数作为输入 输出一个函数 至少满足以上一个条件的函数 JS中内置的高阶函数 在js的内置对象中同样存在着一些高阶函数，像数组的map，filter，reduce方法等，它们接受一个函数作为参数，并应用这个函数到列表的每一个元素 map map方法接收一个函数作为参数 ，遍历数组，并且返回一个新的数组，新的数组里的每个元素都执行map传入的函数。 let arr = [1, 2, 3, 4]; let
前端基础 - JavaScript高级应用（高阶函数）
阿甘兄
04-29 974
将函数用作函数的参数，或将函数作为值返回 ，这些概念属于高阶函数的域。 <head> <script type='text/javascript'> function temperature() { return current } hot = function hot() { alert('Hot.') } cold = ...
前端路线--JS高阶（day01）
Yan9_9的博客
03-13 987
对象的遍历 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script type="text/javascript"> //构造函数创建 function Person(name, sex) { this.name =
day03-js高级资料.zip
10-01
"day03-js高级资料.zip"这个压缩包很可能是提供了一系列关于JavaScript高级特性和技术的教程或参考资料。从标签"js"我们可以推断，这份资料专注于JavaScript的学习与深入探讨。 在JavaScript的世界里，"高级"通常...
day03-js高级讲义.zip
10-01
JavaScript（简称JS）是一种广泛应用于Web开发的轻量级脚本语言，主要在浏览器环境中运行，为网页添加交互性。本讲义将深入探讨JS的高级特性，旨在帮助开发者提升技能，实现更复杂的前端功能。 1. **闭包**：闭包是...
day02-js基础代码.zip
10-01
这个压缩包“day02-js基础代码.zip”很可能是包含了一些JavaScript基础教程或者练习代码的资料，旨在帮助初学者理解并掌握JS的基本概念和语法。 1. **变量和数据类型**： JavaScript 支持多种数据类型，包括基本...
Webkit简介以及工作流程
读心悦
07-10 310
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
cc1314_工作、学习有感
07-12 186
通过sm4对文件进行加解密，用户输入密码
vue2 、 vue3首屏优化，减少白屏时间
m0_56104994的博客
07-09 307
vue2、vue3首屏优化,减少白屏时间
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 163
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。
javascript高级部分笔记
喵喵的博客
07-09 1272
javascript高级部分 Function方法 与 函数式编程 call 语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义：调用一个对象的一个方法，以另一个对象替换当前对象。 说明：call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。 let myName = 'goudan
什么是vue的计算属性
weixin_56187723的博客
07-12 212
Vue的计算属性（Computed Properties）是Vue组件中的一个非常强大的功能，它们允许组件基于它们的响应式依赖进行缓存的派生值。只有当相关响应式依赖发生改变时，计算属性才会重新求值。这意味着只要依赖的响应式数据没有发生变化，多次访问计算属性会立即返回之前的计算结果，而不必再次执行计算函数。
Vue3 使用 Vue Router 时，prams 传参失效和报错问题
最新发布
专注基础架构领域
07-12 343
我尝试使用 prams 传递数据当我跳转页面时,得到的 prams 数据为空 ,控制台也出现了 Vue Router 的警告点开链接后发现了原因,。也就是说，从Vue Router的2022-8-22 这次更新后，我们使用上面的方式在新页面无法获取：vue也给我们提出了解决方案：使用 query 的方式传参只要改成query 传参就好了,注意query传参只能用路由表中的 path ,不是 name ,并且所有参数都会显示在URL 地址上。将参数放在 pinia 或 vuex仓库里。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值