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

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

实例成员和静态成员

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		//构造方法
		function Person (name,age) {
			this.name=name;
			this.age=age;
		}
		//实例成员:构造函数内this指向的,构造函数内的方法和属性  -->属于实例化对象的  必须new出来
		var p=new Person('小谷',10);
		
		//静态成员	构造函数名.属性(方法)				-->属于构造器的
		Person.sex='女';      //new出来的p里没有sex属性   而构造器内的有
		console.log(p);
	</script>
</html>

原型对象和对象原型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>你好哇</h1>
		<script type="text/javascript">
			//构造方法
			function Person (name,age) {
				this.name=name;
				this.age=age;
			}
			
			//原型对象:prototype		<构造器的属性>  构造器.prototype.方法=function(){}  
			Person.prototype.say=function () {				//所有的对象共享此方法
				console.log('我是原型对象里的say方法');
			}
			
			var p1=new Person('小谷',10);
			var p2=new Person('小好',12);
			p1.say();
			console.log('----------------');
			p2.say();
			
			//对象原型:__proto__  ||  [[prototype]](谷歌的升级过后的表示方法)  <对象的属性> 
			console.log(p1);//看p1的对象原型
			console.log(Person.prototype);//看构造器的原型对象
			
			
			/* 
				为了节省空间，在内存中会开辟出构造器原型对象的空间prototype	
				而为了连接对象，在对象内加了个对象原型__proto__ 
				prototype和__proto__ 是完全一样的。
			*/
		</script>
	</body>
</html>

在这里插入图片描述

对象原型下的constructor

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//在每个对象原型下都有一个constructor,它指向了当前原型对象的构造函数
			//constructor:f Person(name,age)
		</script>
	</body>
</html>

在这里插入图片描述

原型链

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/* 
				原型链：
				当访问一个对象的属性或者方法时，首先在自身的构造函数中去查找，如果没有，择取对象原型去查找
				若还没有则去父级的对象原型中去找，直到找到顶层Object,这个过程形成的链，叫做原型链。
			 */
		</script>
	</body>
</html>

在这里插入图片描述

一些方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
		function Person (name,age) {
			this.name=name;
			this.age=age;
		}
		var p=new Person('小谷',10);
		
			// 判断该对象是否含有自己的属性				对象.hasOwnProperty('属性名');
			console.log(p.hasOwnProperty('name'));
			
			//判断当前对象是否在传入的参数对象的原型链上
			console.log(Person.prototype.isPrototypeOf(p));
		</script>
	</body>
</html>

通过原型扩展内置方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//通过原型为数组对象添加求平均值的方法
			Array.prototype.avg=function () {
				var sum=0;
				for (var i = 0; i < this.length; i++) {
					sum+=this[i];
				}
				return sum/this.length;
			}
			
			var arr=new Array(1,2,3);
			console.log(arr.avg());
		</script>
	</body>
</html>

补充iframe

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 200px;
				height: 600px;
				background-color: aqua;
				float: left;
			}
			iframe{
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<a href="01-实例成员和静态成员.html" target='main'>跳转01</a><br>
			<a href="02-原型对象和对象原型.html" target='main'>跳转02</a>
		</div>
		
		<!-- 在网页内又嵌套了一个网页，一般用于后台的管理界面，左侧点击右侧跳转 -->
		<!-- 需要在a标签中加入target='iframe中的名字'    iframe中加name='名字'-->
		<iframe src="01-实例成员和静态成员.html" width="300" height="600" name="main"></iframe>
	</body>
</html>

this的指向问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		/* 
			普通函数:		window
			自执行函数:		window
			定时器函数:		window
			构造函数:		指向当前实例化对象
			事件绑定函数:		绑定事件的事件源
		 */
	</script>
</html>

改变this的指向的方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		var p={
			name:'lucy',
			sex:'女'
		}
		function say (x,y) {
			console.log(this);
			console.log(x,y);
		}
		//默认指向window
		// say(2,3);
		
		//改变this指向问题  方法名.call(被指向的对象,参数)  指向第一个对象
		say.call(p,2,6)
		//方法名.bind(被指向的对象,参数)();  会返回一个新函数,若想使用必须调用
		say.bind(p,2,6)();
		// 方法名.apply(被指向的对象,[参数])
		say.apply(p,[5,6]);
	</script>
</html>
喝西瓜汁的兔叽Yan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
FE21-JS-DAY02-Vendula-Bettina
03-04
【描述】"FE21-JS-DAY02-Vendula-Bettina"的描述为空，但我们可以推测这是针对前端开发者（FE）的2021年课程系列的一部分，特别是针对JavaScript语言的第二天教学内容。可能涉及了前一天的基础知识回顾，并深入介绍...
FE21-JS-DAY05-Vendula-Martin
03-10
5. **函数式编程**：高阶函数的概念，如map、reduce、filter等，以及函数组合和柯里化。 6. **闭包**：理解闭包的工作原理，以及它们在内存管理、模块化和异步编程中的应用。 7. **原型和继承**：JavaScript的原型...
前端路线--JS高阶（day05）
Yan9_9的博客
03-20 183
类的创建 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script type="text/javascript"> /*类的创建：1.类名首字母大写 2.有constructor构造器 3.类的本质
前端进阶学习——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-高级(学习笔记)
热门推荐
前端徒行者
11-01 1万+
课程介绍 大纲 1.原型及作用 2.游戏：贪吃蛇 3.继承 4.高阶函数（内置的方法+正则表达式） 5.正则表达式 目标 理解面向对象开发思想 掌握Javascript面向对象开发相关模式 掌握在Javascript中使用正则表达式 案例演示：贪吃蛇 Day1介绍 1.复习-------------------------------------------大量时间，压缩至30分钟 2...
前端路线--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 =
day02-js基础代码.zip
10-01
这个压缩包“day02-js基础代码.zip”很可能是包含了一些JavaScript基础教程或者练习代码的资料，旨在帮助初学者理解并掌握JS的基本概念和语法。 1. **变量和数据类型**： JavaScript 支持多种数据类型，包括基本...
day03-js高级资料.zip
10-01
"day03-js高级资料.zip"这个压缩包很可能是提供了一系列关于JavaScript高级特性和技术的教程或参考资料。从标签"js"我们可以推断，这份资料专注于JavaScript的学习与深入探讨。 在JavaScript的世界里，"高级"通常...
day03-js高级讲义.zip
10-01
JavaScript（简称JS）是一种广泛应用于Web开发的轻量级脚本语言，主要在浏览器环境中运行，为网页添加交互性。本讲义将深入探讨JS的高级特性，旨在帮助开发者提升技能，实现更复杂的前端功能。 1. **闭包**：闭包是...
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 185
通过sm4对文件进行加解密，用户输入密码
vue2 、 vue3首屏优化，减少白屏时间
m0_56104994的博客
07-09 305
vue2、vue3首屏优化,减少白屏时间
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 162
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。
javascript高级部分笔记
喵喵的博客
07-09 1267
javascript高级部分 Function方法 与 函数式编程 call 语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义：调用一个对象的一个方法，以另一个对象替换当前对象。 说明：call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。 let myName = 'goudan
什么是vue的计算属性
weixin_56187723的博客
07-12 190
Vue的计算属性（Computed Properties）是Vue组件中的一个非常强大的功能，它们允许组件基于它们的响应式依赖进行缓存的派生值。只有当相关响应式依赖发生改变时，计算属性才会重新求值。这意味着只要依赖的响应式数据没有发生变化，多次访问计算属性会立即返回之前的计算结果，而不必再次执行计算函数。
Vue3 使用 Vue Router 时，prams 传参失效和报错问题
最新发布
专注基础架构领域
07-12 341
我尝试使用 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、付费专栏及课程。

余额充值