JavaScript基础&实战（4）js中的对象、函数、全局作用域和局部作用域
文章目录
1、对象的简介
2、对象的基本操作
2.1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对象的基本操作</title>
<style type="text/css"> </style>
<script type="text/javascript">
/*
创建对象：
使用new关键字调用的函数，是构造函数constructor
构造函数是专门用来创建对象的函数
使用typeof检查一个对象时，返回的类型是 object
*/
/*
在对象中保存的值称为属性
向对象中添加属性：
语法：
对象.属性名 = 属性值
读取对象中的属性：
语法：
对象.属性名
如果读取为定义的属性，不会报错，返回undefined
修改对象中的属性：
语法：
对象.属性名 = 新的属性值
删除对象中的属性：
语法：
delete 对象.属性名
*/
var obj = new Object();
//向obj对象添加一个name属性
obj.name = "唐僧";
//向obj对象添加一个gender属性
obj.gender = "男";
//向obj对象添加一个age属性
obj.age = 18;
console.log(obj);
console.log(obj.name);
</script>
</head>
<body>
</body>
</html>
2.2 测试结果
3、属性和属性值
3.1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性名和属性值</title>
<style type="text/css"> </style>
<script type="text/javascript">
/*
向对象中添加属性
属性名：
- 对象的属性名不强制要求遵循标识符的规范
如果要使用特殊的属性名，不能采用.的方式操作
需要使用另一种方式：
语法： 对象["属性名"] = 属性值
读取时也需要采用这种方式
使用[]这种形式去操作属性，更加的灵活
在[]中可以直接传递一个变量，这样变量值是多少就会去读取那个属性
*/
/*
属性值
JS对象的属性值，可以是任意的数据类型
*/
var car = new Object();
car["kdjak38^%$#"] = "hello";
console.log(car["kdjak38^%$#"]);
car["123"] = 567;
var n = "123";
console.log(car[n]);
</script>
</head>
<body>
</body>
</html>
3.2 测试结果
4、对象的方法
4.1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>方法</title>
<style type="text/css"> </style>
<script type="text/javascript">
/*
对象的属性值可以是任意的数据类型，也可以是个函数
*/
var obj = new Object();
obj.username = "小红";
obj.age = 18;
obj.say = function(){
console.log("我是小红的方法")
}
obj.say();
</script>
</head>
<body>
</body>
</html>
4.2 测试结果
5、对象字面量
5.1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对象字面量</title>
<style type="text/css"> </style>
<script type="text/javascript">
/*
使用对象字面量，可以在创建对象时，直接指定对象中的属性
语法：{属性名:属性值,属性名:属性值...}
对象字面量的属性名可以加引号也可以不加，建议不加
如果需要使用一些特殊的名字，则必须加引号
属性名和属性值是一组一组的名值对，多个名值对之间使用逗号隔开
*/
var car = {
name:"奥迪",
color:"黑色"
};
console.log(car);
</script>
</head>
<body>
</body>
</html>
5.2 测试结果
6、函数
6.1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数</title>
<style type="text/css"> </style>
<script type="text/javascript">
/*
函数function
- 函数也是一个对象
- 函数中可以封装一些功能 (代码)，在需要的时候可以执行这些功能(代码)
- 函数中可以保存一些代码在需要的时候调用
- 使用typeof检查一个函数的时候，返回是function
创建一个函数对象：
可以将要封装的代码以字符串的形式传递给构造函数
*/
// 创建一个函数对象
// 可以将要封装的代码以字符串的形式传递给构造函数
var fun = new Function("console.log('hello');");
//封装到函数中的代码不会立刻执行
//函数中的代码会在调用的时候执行
//调用函数语法：函数对象()
//当调用函数时，函数中封装的代码会按照顺序执行
fun();
/*
使用函数声明来创建一个函数
语法：
function 函数名([形参1，形参2...]){
}
*/
function fun2(){
console.log("我的函数");
alert("hhhh")
document.write("hhhhedu");
}
//代码执行
fun2();
/*
使用函数表达式 来创建一个函数
var 函数名 = function([形参1，形参2...]){
语句
}
*/
</script>
</head>
<body>
</body>
</html>
6.2 测试结果
7、全局作用域和局部作用域
7.1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style type="text/css"> </style>
<script type="text/javascript">
/*
作用域
- 作用域指一个变量的作用的范围
在JS中一共有两种作用域：
1、全局作用域：
- 直接编写在script标签中的JS代码，都在全局作用域
- 全局作用域在页面打开时创建，在页面关闭时销毁
- 在全局作用域中有一个全局对象window，
它代表的是一个浏览器的窗口我们可以直接使用
- 在全局作用域中：
创建的变量都会作为window对象的属性保存
创建的函数都会作为window对象的方法保存
- 全局作用域中的变量都是全局变量
再页面的任意的部分都可以访问的到
2、函数作用域
- 调用函数时创建函数作用域，函数执行完毕后，函数作用域销毁
- 每调用一次函数就会创建一个新的函数作用域，他们之间是相互独立的
- 在函数作用域中可以访问到全局作用域的变量，
- 在全局作用域中无法访问到函数作用的变量
- 当在函数作用域操作一个变量时，首先在自身作用域中寻找，如果有就直接使用
如果没有则向上一级作用域中寻找，直到直到全局作用域中，
如果全局作用域中依然没有找到，则会报错ReferenceError
在函数作用域也有声明提前的特性：
使用var关键字声明的变量，会在函数中所有的代码执行之前被声明
函数声明也会在函数中所有的代码执行之前执行
*/
function fun(){
console.log("我是fun函数");
}
fun();
window.fun();
console.log(window)
/*
变量的声明提前
- 使用var关键字声明的变量，会在所有的代码执行之前被声明
但是如果声明变量时不适用var关键字，则变量不会被提前声明
*/
console.log("a = "+ a);
var a = 123;
/*
函数的声明提前：
- 使用函数声明形式创建的函数functio 函数(){}
它会在所有的代码执行之前就被创建。可以在函数声明前进行调用
使用表达式创建的函数不能被提前声明
var fun1 = function(){
语法 //不能被提前声明
}
*/
fun3();
function fun3(){
console.log("我是fun3()")
}
</script>
</head>
<body>
</body>
</html>
7.2 测试结果
JavaScript基础&实战（4）js中的对象、函数、全局作用域和局部作用域的更多相关文章
- javascript基础入门之js中的数据类型与数据转换01
javascript基础入门之js中的数据结构与数据转换01 js的组成(ECMAScript.BOM.DOM) js中的打印语句: 数据类型 变量 ...
- javascript基础入门之js中的结构分支与循环语句
javascript基础入门之js中的结构分支与循环语句 程序的结构①顺序结构:自上而下:②选择(分支)结构:多条路径,根据不同的条件,只执行其中一个:③循环结构:重复某些代码④配合特定的语句实现选择 ...
- JavaScript基础&实战（3）js中的流程控制语句、条件分支语句、for循环、while循环
文章目录 1.流程控制语句 1.1 代码 1.2 测试结果 2.弹窗提示输入内容 2.1 代码 2.2 测试结果 3.条件分支语句 3.1 代码 3.2 测试结果 4.while和 do...whil ...
- JavaScript学习12 JS中定义对象的几种方式【转】
avaScript学习12 JS中定义对象的几种方式 转自: http://www.cnblogs.com/mengdd/p/3697255.html JavaScript中没有类的概念,只有对象. ...
- JavaScript学习12 JS中定义对象的几种方式
JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...
- JavaScript基础&实战（1）js的基本语法、标识符、数据类型
文章目录 1.JavaScript简介 2.输出语句 2.1 代码块 2.2 测试结果 3.JS编写位置 3.1代码 3.2 测试结果 4.基本语法 4.1 代码 5.标识符 5.1 代码 6.数据类 ...
- JavaScript基础：数据类型的中的那些少见多怪
原文:JavaScript基础:数据类型的中的那些少见多怪 Javascript共有6种数据类型,其中包括3个基本数据类型(string,number,boolean).2个特殊数据类型(undefi ...
- 浅解析js中的对象
浅解析js中的对象 原文网址:http://www.cnblogs.com/foodoir/p/5971686.html,转载请注明出处. 前面的话: 说到对象,我首先想到的是每到过年过节见长辈的时候 ...
- JS中的对象和方法简单剖析
众所周知,在js中对象就是精髓,不理解对象就是不理解js. 那么什么事js中的对象呢? 在js中,几乎一切皆对象: Boolean ,String,Number可以是对象(或者说原生数据被认作对象): ...
随机推荐
- 5.27 NOI 模拟
\(T1\)约定 比较水的\(dp\)题 上午想到了用区间\(dp\)求解,复杂度\(O(n^5),\)貌似没开\(long\ long\)就爆掉了 正解还是比较好想的,直接枚举从何时互不影响然后转移 ...
- JavaScript 权威指南-学习笔记（一）
本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! ## JavaScript 权威指南-学 ...
- 企业运维实践-Nginx使用geoip2模块并利用MaxMind的GeoIP2数据库实现处理不同国家或城市的访问最佳实践指南
关注「WeiyiGeek」公众号 设为「特别关注」每天带你玩转网络安全运维.应用开发.物联网IOT学习! 希望各位看友[关注.点赞.评论.收藏.投币],助力每一个梦想. 本章目录 目录 0x00 前言 ...
- Win10文件、文件夹被占用解决方法
有时删除文件/弹出移动硬盘的时候会出现文件或文件夹或磁盘被占用的情况,从而无法删除文件/文件夹或安全弹出移动硬盘.这时可以在资源管理器中搜索该文件.文件夹,来找到对应的程序. 使用了以下链接中的方法, ...
- JS判断两个数组的元素是否完全相等
1.使用ES6 新增的扩展运算符和Set新数据类型判断两个数组是否包含有相同的元素 var arr1 = ['green' , 'yellow' ,'blue' ,'red']; var arr2 = ...
- CSP2021-S游记
前言 年纪大了,脑子乱了,渐渐被低年级吊打了. 大家这么内卷下去,高年级的普遍后悔自己生早了,低年级永远占优势,不只是机会优势,还有能力优势. 快进到改变基因出生国家队算了-- Day0 非常不幸地被 ...
- [HNOI2010]弹飞绵羊 （平衡树，LCT动态树）
题面 题解 因为每个点都只能向后跳到一个唯一的点,但可能不止一个点能跳到后面的某个相同的点, 所以我们把它抽象成一个森林.(思考:为什么是森林而不是树?) 子节点可以跳到父节点,根节点再跳就跳飞了. ...
- C#基础_手动书写XML
XML文档内容: 1.文档声明2.元素=标签 文档总至少要有一个根元素3.属性4.注释 <!--注释内容-->5.CDATA区.特殊字符 <![CDATA[不想解析的内容]]&g ...
- 【面试题】Vue中的$router 和 $route的区别
Vue中的$router 和 $route的区别 点击视频讲解更加详细 this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, ...
- 简单创建一个SpringCloud2021.0.3项目（一）
目录 1. 项目说明 1. 版本 2. 用到组件 3. 功能 2. 新建父模块和注册中心 1. 新建父模块 2. 新建注册中心Eureka 3. 新建配置中心Config 4. 新建两个业务服务 1. ...