javascript学习笔记(七)

最新推荐文章于 2022-04-11 13:17:55 发布
最新推荐文章于 2022-04-11 13:17:55 发布
阅读量573 收藏 1
点赞数 1
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51313985/article/details/117194470
版权
方法

函数也可以成为对象的属性,如果一个函数作为一个对象的属性保存那么我们称这个函数时这个对象的方法
调用函数就说调用这个对象的方法(method)
在这里插入图片描述
这里sayname就是obj的方法，调用sayname的时候我们就说调用obj的sayname方法
在这里插入图片描述
这里是调函数
调函数和调方法这里只是名称上的区分，没有本质的差别

枚举对象中的属性，使用for…in语句
语法:
for(var 变量 in 对象){
}
for…in语句对象中有几个属性，循环体就会执行几次
每次执行时，会将对象中的一个属性的名字赋值给变量
在这里插入图片描述
在这里插入图片描述
如果我们想输出这些属性的内容呢
在这里插入图片描述
在这里插入图片描述

全局作用域

作用域：
作用域指一个变量的作用的范围-在JS中一共有两种作用域:
1.全局作用域
直接编写在script标签中的JS代码，都在全局作用域
全局作用域在页面打开时创建,在页面关闭时销毁
在全局作用域中有一个全局对象window
它代表的是一个浏览器的窗口，它由浏览器创建我们可以直接使用
在这里插入图片描述
在这里插入图片描述
在全局作用域中，创建的变量都会作为window对象的属性保存
在这里插入图片描述
在这里插入图片描述
这里a虽然是一个变量，但它也是作为window对象的一个属性保存的
在这里插入图片描述
在这里插入图片描述
既然这样那么函数也能成为window的方法，那么试试看能不能调用window的一个方法
在这里插入图片描述
在这里插入图片描述
在全局作用域中。
创建的变量都会作为window对象的属性保存
创建的函数都会作为window对象的方法保存

变量的声明提前
使用var关键字声明的变量，会在所有的代码执行之前被声明(但是不会赋值)
但是如果声明变量时不适用var关键字，则变量不会被声明提前
在这里插入图片描述
在这里插入图片描述
如果去掉var
在这里插入图片描述
在这里插入图片描述

函数的声明提前
使用函数声明形式创建的函数function 函数() {
}
它会在所有的代码执行之前就被创建
在这里插入图片描述
在这里插入图片描述
使用函数表达式创建的函数，不会被声明提前，所以不能在声明前调用
在这里插入图片描述
在这里插入图片描述
全局作用域中的变量都是全局变量,在页面的任意的部分都可以访问的到

2.函数作用域
调用函数时创建函数作用域,函数执行完毕以后，函数作用域销毁
每调用一次函数就会创建一个新的函数作用域,他们之间是互相独立的
在这里插入图片描述
在函数作用域中可以访问到全局作用域的变量
在这里插入图片描述
在这里插入图片描述
在全局作用域中无法访间到函数作用域的变量
在这里插入图片描述
在这里插入图片描述
当在函数作用域操作一个变量时,它会先在自身作用域中寻找，如果有就直接使用，如果没有则向上一级作用域中寻找
在这里插入图片描述
在这里插入图片描述
我们把里面的变量注释掉
在这里插入图片描述
在这里插入图片描述
如果全局作用域中依然没有找到，则会报错
在这里插入图片描述
在这里插入图片描述

在函数中要访问全局变量可以使用window对象

在函数作用域也有声明提前的特性,
使用var关键字声明的变量，会在函数中所有的代码执行之前被声明
函数声明也会在函数中所有的代码执行之前执行
在这里插入图片描述
在这里插入图片描述
在函数中,不适用var声明的变量都会成为全局变量，变量会在全局输出
在这里插入图片描述
在这里插入图片描述
定义形参就相当于在函数作用域中声明了变量
在这里插入图片描述
在这里插入图片描述
这里只是没有给实参赋值

debug

在这里插入图片描述
在这里插入图片描述
对它进行下断点监视每一个语句的执行情况，具体操作不详细演示了

this

解析器在调用函数每次都会向函数内部传递进一个隐含的参数
这个隐含的参数就是this，this指向的是一个对象
这个对象我们称为函数执行的上下文对象
根据函数的调用方式的不同,this会指向不同的对象
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
调fun的时候是window
1.以函数的形式调用时，this永远都是window
2.以方法的形式调用时，this就是调用方法的那个对象

使用工厂方法创建对象

在这里插入图片描述
但是这样就把它写死了，我们需要他们输出我们想要的
在这里插入图片描述
在这里插入图片描述
这里还没传实参，我们来传一下试试
在这里插入图片描述
在这里插入图片描述

构造函数

使用工厂方法创建的对象,使用的构造函数都是Object，所以创建的对象都是Object这个类型,就导致我们无法区分出多种不同类型的对象|
创建一个构造函数，专门用来创建Person对象的

构造函数就是一个普通的函数，创建方式和普通函数没有区别
构造函数的执行流程:
1.立刻创建一个新的对象
2.将新建的对象设置为函数中this，在构造函数中可以使用this来引用新建的对象
3.逐行执行函数中的代码
4.将新建的对象作为返回值返回

使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

我们将通过一个构造函数创建的对象，称为是该类的实例
使用instanceof可以检查一个对象是否是一个类的实例
语法:
对象 instanceof 构造函数
在这里插入图片描述
在这里插入图片描述
所有的对象都是Object的后代，
所以任何对象和Object左instanceof检查时都会返回true

创建一个Person构造函数
在Person构造函数中,为每一个对象都添加了一个sayName方法，
目前我们的方法是在构造函数内部创建的,
也就是构造函数每执行一次就会创建一个新的sayName方法也是所有实例的sayName都是唯一的
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这样就导致了构造函数执行一次就会创建一个新的方法，
执行10000次就会创建10000个新的方法，而10000个方法都是一模一样的
这是完全没有必要，完全可以使所有的对象共享同一个方法

将sayName方法在全局作用域中定义
在这里插入图片描述
在这里插入图片描述
但是这种方法不好，有很大的弊端，详细的内容，我们下次再说！

未完待续…

bay0net
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
匿名对象（大白话）
wu15632548808的博客
06-05 192
什么是匿名对象 就像他的名字一样，其实他就是一个没有名字的对象。 new Student();这就是一个没有名字的对象。再来个有名字的对比一下Student s=new Student();这是一个有名字的对象，他的名字就叫s 他们的区别是什么： 普通对象，在创建对象用了new以后，就会在堆内存中开辟一块儿空间，给这个对象使用。这还不算完，别忘了我们还给他起了一个名字s。这个s呢就需要栈内存给他开辟一个空间。这个s呢就保存着这个对象的地址信息，你可以理解成是对象给了名字一个令牌，然后这个名字就可以拿着这块
15-JavaScript高级程序设计-创建对象
dandan666dandan的博客
07-06 2303
一、创建对象 创建单个对象：Object构造函数（new Object()）、对象字面量 1.工厂模式 function createPerson(name, age, job){ var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function(){ alert(th...
使用工厂方法和构造函数创建对象的区别
liumuye88888的博客
04-09 342
工厂顾名思义简单来说就是流水线批量生产 1.普通方法创建对象 var obj = { name:'小明', age:'18', gender:"男", sayName:function(){ alert(this.name) } } var obj2 = { name:'小红',
Java之匿名对象
一名小白的进阶之路
01-13 158
匿名对象：只能使用一次的对象，与正常初始化对象不同在于匿名对象没有左侧，不需要赋值给对象变量。 例如： new Student().shoutname(); 初始化了一个Student对象并同时调用类中的shoutname方法，但是没有把初始化的Student对象赋值给一个Student变量，所以只能使用一次。 错误理解: new Student().name = "李林"; ...
javascript中对象方法
plannothing的博客
07-21 120
/* * 创建一个对象 */ var obj = new Object(); //向对象中添加属性 obj.name = "孙悟空"; obj.age = 18; //对象的属性值可以是任何的数据类型。也可以是个函数 obj.sayName = function(){ console.log(obj.name) }; function fun(){ console.log(obj.name) }; console.log(obj.sayNam
javascript学习笔记
11-24
JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。因为他不需要在一个语言环境下运行，而只需要支持它的浏览器即可。它的主要...
Ruffy javascript 学习笔记
10-29
Ruffy javascript 学习笔记
JavaScript 学习笔记（十一）
10-29
继续学习的是document对象。
JavaScript学习笔记
06-23
本资源“JavaScript学习笔记”是为初学者精心准备的一份教程，旨在帮助你快速掌握JavaScript的基础知识，并解决在学习过程中可能遇到的问题。 1. **变量与数据类型**： JavaScript支持多种数据类型，包括基本类型...
Super方法
RUCwang的博客
09-01 3435
Super方法用来调用和访问父类的方法 super 关键词可以单独出现在子类的构造函数中，调用父类的构造函数为子类属性赋值（注意super关键词必须出现在this关键词之前）。 class Father{ constructor(x, y){ this.x = x; this.y = y; this.name = 'Father' ...
函数
Aqours的博客
06-13 226
函数 函数的创建 函数function 函数也是一个对象 ,函数中可以封装一些功能(代码),在需要时可以执行这些功能(代码) 使用typeof 检查一个函数对象时，会返回function 使用构造函数来创建一个函数对象：可以将要封装的代码以字符串的形式传递给构造函数，在平常中很少使用构造函数来创建函数 var fun=new Function("console.log('这...
【JS基础】原型对象的那些事（一）
JNPF快速开发平台的博客
08-26 282
谈起js的基础，绕不过去的坎就是：原型链、作用域链、this（em...好吧，还有闭包），今天总结一下关于原型对象的一些知识，供自己和大家复习。 概念理解 什么是原型对象呢？有以下几点： 1.构造函数有一个prototype属性，指向构造函数的原型对象。而实例有一个__proto__属性，也指向原型对象。 PS: 准确的说，实例指向原型对象的是[[Prototype]]属性，但这是一个隐式属性，脚本不可访问。因此浏览器厂商提供了一个属性__proto__，用来显式指向原型对象，但它并不是ECMA规范。
JavaScript
ximingx
04-11 625
JavaScript
JavaScript创建对象的4种方法
热门推荐
dearzhuoer的博客
11-28 1万+
JavaScript 创建对象的4种方法 所谓对象就是用来帮助你完成一些事情是，对象是有特征和行为的，是具体特指的某一个事物。使用对象可以使程序更加整洁 通过Object()方法来创建 Object()是JavaScript内部的对象，使用Object创建对象的语法： 我们通过Object创建的一个Dog对象，这个对象有name,color,eat属性；并且给这个对象定义了两个方法，因此我们...
JS学习笔记（二）基础知识概念2
不想去派出所
05-16 166
0x00 从对象开始 0x01 对象 对象属于一种复合的数据类型，在对象中可以保存多个不同的数据类型的属性 对象分为内建对象，宿主对象，自定义对象 0x02 对象的基本操作 创建对象 创建了一个新的对象 向对象中添加属性 读取对象中的属性 读取对象中没有的属性，会返回undefined 删除对象的属性 0x03 对象中的属性值与属性名 属性名的要求 对象的属性名不强制要求遵循标识符的规范 如果要使用特殊的属性名，不能使用.的操作来使用，要使用另一种方
js中的词法作用域，this和块级作用域
Handsome2013的博客
03-07 475
js中的词法作用域，this和块级作用域 箭头函数的this会忽略对象，块级作用域。 { let a=5; let func3=()=>{ console.log('a',this.a)//作用域是在和这个for循环块里面， 5 } func3();//a undefined } 以下来自：https://www.cnblogs.com/githubzy/p/5780135.html 当我们将箭头函数直接用于对象的方法时，this的指向就发生了变化： 1 ...
js中变量name问题以及js中的关键字和保留字。
木木木华的博客
05-16 1926
今天做dom练习时，想对输入的账号以及密码做一个简单的限制。 问题：检测用户名是否是3-6位，密码是否是6-8位，如果不满足要求高亮显示文本框 本以为很简单的例子，出现了问题。想了好长时间，逻辑都是对的，想要获取输入框字符串，获取长度，变色，就好了。 但输入框就是没有变化，想不通。。。。。然后各种测试，各种改，直到我快放弃。。。然后我决定把验证密码的代码补全，然后去请教...
html代码name是什么意思,JavaScript中nodeName是什么意思？
weixin_33416900的博客
06-22 1413
nodeName是JavaScript中的一个HTML DOM属性，nodeName属性可以返回指定节点的名称。下面本篇文章就来给大家介绍一下JavaScript的nodeName属性，希望对大家有所帮助。nodeName 属性可依据节点的类型返回其名称。如果节点是一个元素节点 , nodeName 属性将返回标签名。如果节点是一个属性节点， nodeName 属性将返回属性名。其他节点类型, n...
前端学习笔记 javascript
最新发布
08-31
对于前端学习笔记，我可以给你一些常见的主题和要点，帮助你开始学习前端开发。 1. HTML基础： - 了解HTML的基本结构和标签 - 学习如何创建和组织网页内容 - 掌握常用的HTML标签，如标题、段落、链接、图像等 2. CSS样式： - 学习如何使用CSS来为网页添加样式 - 掌握CSS选择器和属性 - 学习如何设置文字样式、颜色、背景、布局等 3. JavaScript基础： - 理解JavaScript的基本概念和语法 - 学习如何操作DOM元素，实现网页交互 - 掌握常用的JavaScript函数和事件处理 4. 响应式设计： - 学习如何使用媒体查询和弹性布局创建响应式网页 - 掌握移动优先设计和流体网格布局 5. 前端框架和工具： - 了解流行的前端框架，如React、Angular、Vue等 - 学习使用前端构建工具，如Webpack、Gulp等 - 掌握前端调试工具和浏览器开发者工具的使用 这些是前端学习的一些基本知识点，你可以根据自己的兴趣和需求深入学习和实践。记得不断练习和实践，通过实际项目来提升自己的前端开发能力。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值