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中的对象、函数、全局作用域和局部作用域的更多相关文章

  1. javascript基础入门之js中的数据类型与数据转换01

    javascript基础入门之js中的数据结构与数据转换01 js的组成(ECMAScript.BOM.DOM)        js中的打印语句:        数据类型        变量      ...

  2. javascript基础入门之js中的结构分支与循环语句

    javascript基础入门之js中的结构分支与循环语句 程序的结构①顺序结构:自上而下:②选择(分支)结构:多条路径,根据不同的条件,只执行其中一个:③循环结构:重复某些代码④配合特定的语句实现选择 ...

  3. JavaScript基础&实战(3)js中的流程控制语句、条件分支语句、for循环、while循环

    文章目录 1.流程控制语句 1.1 代码 1.2 测试结果 2.弹窗提示输入内容 2.1 代码 2.2 测试结果 3.条件分支语句 3.1 代码 3.2 测试结果 4.while和 do...whil ...

  4. JavaScript学习12 JS中定义对象的几种方式【转】

    avaScript学习12 JS中定义对象的几种方式 转自:  http://www.cnblogs.com/mengdd/p/3697255.html JavaScript中没有类的概念,只有对象. ...

  5. JavaScript学习12 JS中定义对象的几种方式

    JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...

  6. JavaScript基础&实战(1)js的基本语法、标识符、数据类型

    文章目录 1.JavaScript简介 2.输出语句 2.1 代码块 2.2 测试结果 3.JS编写位置 3.1代码 3.2 测试结果 4.基本语法 4.1 代码 5.标识符 5.1 代码 6.数据类 ...

  7. JavaScript基础:数据类型的中的那些少见多怪

    原文:JavaScript基础:数据类型的中的那些少见多怪 Javascript共有6种数据类型,其中包括3个基本数据类型(string,number,boolean).2个特殊数据类型(undefi ...

  8. 浅解析js中的对象

    浅解析js中的对象 原文网址:http://www.cnblogs.com/foodoir/p/5971686.html,转载请注明出处. 前面的话: 说到对象,我首先想到的是每到过年过节见长辈的时候 ...

  9. JS中的对象和方法简单剖析

    众所周知,在js中对象就是精髓,不理解对象就是不理解js. 那么什么事js中的对象呢? 在js中,几乎一切皆对象: Boolean ,String,Number可以是对象(或者说原生数据被认作对象): ...

随机推荐

  1. eclipse mave无法下载jar包

    解决方法: 先查看本地配置是否正确: 确保此处没有勾选 此处和自己配置的maven一致,没有则修改此处设置.然后项目上右键–>Maven–>Update Project 即可 . 如果还不 ...

  2. Apache DolphinScheduler 使用文档(6/8):任务节点类型与任务参数设置

    本文章经授权转载,原文链接: https://blog.csdn.net/MiaoSO/article/details/104770720 目录 6. 任务节点类型和参数设置 6.1 Shell节点 ...

  3. 巨细靡遗流程控制,Go lang1.18入门精炼教程,由白丁入鸿儒,Go lang流程结构详解EP09

    流程结构就是指程序逻辑到底怎么执行,进而言之,程序执行逻辑的顺序.众所周知,程序整体都是自上由下执行的,但有的时候,又不仅仅是从上往下执行那么简单,大体上,Go lang程序的流程控制结构一共有三种: ...

  4. java-重载、包修饰词以及堆栈管理

    1.方法的重写(Override):重新写.覆盖 1)发生在父子类中,方法名称相同,参数列表相同,方法体不同 2)重写方法被调用时,看对象的类型2.重写与重载的区别: 1)重写(Override): ...

  5. 基于bert训练自己的分词系统

    前言 在中文分词领域,已经有着很多优秀的工具,例如: jieba分词 SnowNLP 北京大学PKUse 清华大学THULAC HanLP FoolNLTK 哈工大LTP 斯坦福分词器CoreNLP ...

  6. [HDU1812] Count the Tetris - polya定理

    题面 Problem Description 话说就是因为这个游戏,Lele已经变成一个名人,每当他一出现在公共场合,就有无数人找他签名,挑战. 为了防止引起社会的骚动,Lele决定还是乖乖呆在家里. ...

  7. Altium Designer 18学习

    目录 目录 快捷键 通孔 敷铜 修改铜皮与导线之间的间隔 去除指定敷铜区域 DRC设计规则检查问题: 快捷键 EJC 快速跳转到器件 M 移动 CTRL+M 测量距离 通孔 敷铜 放置多边形平面 -- ...

  8. Android平台Camera2数据如何对接RTMP推流到服务器

    1. Camera2架构 在Google 推出Android 5.0的时候, Android Camera API 版本升级到了API2(android.hardware.camera2), 之前使用 ...

  9. Git Bash(提交文件到GitHub进行托管)

    ​ Introduction 使用Git Bash命令,可以将一个项目上传到Github官网中,进行托管,避免重要文件被误删 1.Git工具下载 Git for Windows 2.在github中新 ...

  10. ORM增删改查并发性能测试

    这两天在对一些ORM进行性能测试(涉及SqlSugar.FreeSql.Fast.Framework.Dapper.LiteSql),测试用的是Winform程序,别人第一眼看到我的程序,说,你这测试 ...