JavaScript基础语法

于 2022-04-29 14:10:22 发布
阅读量2.3k 收藏
点赞数 1
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/mengweiwei_/article/details/124402660
版权

JavaScript基础语法，他和春天一起来啦！

想先看看哪个？

一、JavaScript是什么？

1.JavaScript的历史沿革

JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。

在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像当下十分流行的Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。

2.JavaScript的组成部分

JavaScript主要包括三部分：

①ECMAScript

ECMAScript是JavaScript的核心，仅仅是一个描述，定义了脚本语言的所有属性，方法和对象。具体地，ECMAscript描述了以下内容： 语法、类型、语句、关键字、保留字、运算符、对象每个浏览器都有它自己的ECMAScript 接口的实现，然后这个实现又被扩展，包含了 DOM 和 BOM。

②DOM–文档对象模型

DOM（文档对象模型）是 W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。

③BOM–浏览器对象模型

BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象模型，通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

3.JavaScript的特点

① 解释性的脚本语言
与其他脚本语言一样，JavaScript也是一种解释性语言，代码不进行预编译，提供了非常方便的开发过程。JavaScript的基本语法结构与C、C++、Java非常相似。但是在使用之前，与这些语言不同，它们需要先被编译，但是在运行程序的过程中由js解释器逐行解释。javascript与HTML标识符结合使用，方便用户操作。

② 动态 实时 交互
JavaScript最开始用于表单的输入验证，例如网页会提示你密码需要控制长度在6~12个字符长度内。Javascript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容。JavaScript是运行在客户端的脚本语言，以事件驱动的方式响应用户需求事件，而不需要任何网络来回传输数据。因此，当用户输入数据时，数据可以由客户机应用程序直接处理，而不是由服务器处理。Javascript短小精悍，又是在客户机上执行的，大大提高了网页的浏览速度和交互能力。同时它又是专门为制作Web网页而量身定做的一种简单的编程语言。avaScript 使网页增加互动性。JavaScript 使有规律地重复的HTML文段简化，减少下载时间。JavaScript 能及时响应用户的操作，对提交表单做即时的检查，无需浪费时间交由CGI 验证。

③ 跨平台
JavaScript依赖于浏览器本身，与操作环境无关。只要计算机能运行浏览器，支持javascript浏览器，就可以正确执行。因此，javascript是一种可以嵌入到HTML文件中的新描述语言。

④ 安全
JavaScript是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。

⑤ 面向对象
它也可以看作是一种面向对象的语言，这意味着JavaScript可以使用它创建的对象。因此，许多函数可以来自脚本环境中对象方法和脚本之间的交互。

4.JavaScript的作用

  1. 最初用于表单动态校验
  2. 网页特效
  3. 服务端开发（Node.js）
  4. 桌面程序（Electron）
  5. App（Cordova）
  6. 控制硬件–物联网（Ruff）
  7. 游戏开发（cocos2d-js）

5.浏览器如何执行JavaScript

浏览器分成两部分，渲染引擎和JS引擎
渲染引擎
用来解析html与css，俗称内核，比如chrome浏览器的blink，老版本的webkit
JS引擎
也称为JS解释器，用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8

二、JavaScript怎么用

1.引入方法

  • 行内式，直接写到元素的内部
<input type="button" value="欧豪" onclick="alert('你是我的神')">
  • 内嵌式 ，与css类似
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<<device-width>>, initial-scale=1.0">
    <title>Document</title>
    <script>
        alert('什么时候解封');
    </script>
</head>
<body>
</body>
</html>
  • 外联式
<script src="my.js"></script>

注意标签的两个尖尖中间不能写代码！！！ 在my.js中直接写想加的样式
在这里插入图片描述

2.如何添加注释

  1. 单行注释 / / 选中要添加注释的地方 按ctrl + /
  2. 多行注释 / * * / 选中要添加注释的区域 按shift + ctrl + a

如果要修改默认的快捷键可以在vscode中点击左下角的设置按钮，选择键盘快捷方式在这里插入图片描述

3.输入输出语句

在这里插入图片描述输入框、弹出警示框、控制台

<script>
        prompt('请输入您的emo程度');
        alert('鉴定结果为：你已经疯了');
        console.log('只有聪明的程序员才能看到这里');
</script>

三、基础语法

1.变量

1.1 什么是变量

变量是程序在内存中申请的一块用来存放数据的空间，我们通过变量名获取数据，甚至可以修改数据

1.2 使用变量

  • 声明变量
var age; 声明一个名为age的变量

var是一个JS关键字，用来声明变量（variable），使用该关键字声明变量后，计算机会自动为变量分配内存空间

  • 命名规范
    在这里插入图片描述

可以一次声明单个变量，也可以一次声明多个变量。

var age = 10, name = '23', sex = 2;声明多个变量
  • 赋值
    把值赋给变量，如果没有赋值，系统自动默认赋值是undefined
    如果多次为变量赋值，将会不断更新变量的值
age = 10; 把 10 赋给变量 age
  • 变量的初始化–声明变量并赋值
var age = 10;

与c语言、java不同的是：JS允许不声明，直接赋值的情况

tel = 123;

综合实践

<script>
        var emo = prompt('请输入您的emo程度');
        aler(emo);
</script>

2.数据类型

2.1 为什么需要数据类型

在计算机中，不同的数据类型所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。

2.2 变量的数据类型

变量是用来存储值的所在处，他们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript是一种弱类型或者说动态语言，这意味着不用提前声明变量的类型，在程序运行过程，类型会被自动确定

var age = 10;
var areYourOk = '是的';

在代码运行时，变量的数据类型是由JS引擎根据等号=右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。
相同的变量也可用作不同的类型

var x = 6;
var x = "Bill";

2.3 数据类型的分类

简单数据类型说明默认值
Number数字型，包含整型值和浮点型值，如21、0.210
Boolean布尔值类型，如true、false，等价于1和0false
String字符串类型，js中字符串都带引号“”
Undefinedvar a;只声明没有赋值undefined
Nullvar a=null;声明了变量a为空值null

2.3.1 Number数字型

数字前加0表示八进制，加0x表示十六进制

最大值和最小值
在这里插入图片描述

在这里插入图片描述
isNaN()
用来判断一个变量是否为非数字的类型，是则返回true，否则返回false

2.3.2 String字符串型

字符串型可以是引号中的任意文本，其语法为双引号 " "和单引号’ ’
JS可以用单引号嵌套双引号，也可以用双引号嵌套单引号，例如

var str = '你是"搞笑女"吧';

如果想打出换行、横线这些转义字符，我们需要用到字符串转义符

字符串转义符
在这里插入图片描述转义字符一定要写在引号里面

字符串长度

字符串中字符的数量就是字符串的长度，通过字符串的length属性可以获取整个字符串的长度

var str = 'i love you';
alert(str.length);//length=10

字符串拼接

  • 多个字符串之间可以使用加号 “ + ” 进行拼接，其拼接方式为字符串 + 任何类型 = 拼接之后的新字符串
alert('蓝'+'旭');//浏览器会弹出“蓝旭”两个字
alert('12'+ 12);//浏览器会弹出“1212”
alert('fafeng'+true);//浏览器会弹出“fafengtrue”
var age = 18;
alert('今年'+ age +'岁');//

综合

<script>
        var emo = prompt('请告诉我你的一个小秘密');
        var str = '我才不会告诉别人你的小秘密是'+emo+'呢';
        alert(str);
</script>

在这里插入图片描述在这里插入图片描述

2.3.3 Boolean布尔型

var flag = true;

如果布尔型参与加法运算，true当1来看，false当成0来看

2.3.4 Undefined未定义

var variable = undefined;
alert(variable + 'pink');//undefinedpink
alert(variable + 1);//最后的结果是NaN(not a number)

2.3.4 Null空值

var space = null;
alert(space + 'pink');//弹出nullpink，当作字符串拼接
alert(space + 1);//弹出1，此时null相当于0

2.4 获取变量数据类型

<script>
        var num = 10;
        console.log(typeof num);
        var str = 'baby';
        console.log(typeof str);
        var flag = true;
        console.log(typeof flag);
        var vari = undefined;
        console.log(typeof vari);
        var timer = null;
        console.log(typeof timer);
        var age = prompt('请输入你的年龄');//用prompt取出的值是字符型
        console.log(age);
        console.log(typeof age);
</script>

在这里插入图片描述
2.4.1 字面量

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何来表达这个值。

  • 数字字面量：8，9，10
  • 字符串字面量：‘蓝旭’，‘别让我挂科’
  • 布尔字面量：true，false

2.4.2 数据类型转换

转换成字符串

方法一：变量.toString()

var num = 10;
var str = num.toString();
console.log(str);
console.log(typeof str);

方法二：String(变量)

var num = 10;
console.log(String(num));

方法三：利用+拼接字符串的方法实现转换效果

var num = 10;
console.log(num + '');

转换为数字型

<script>
        //1、parseInt(变量)可以把字符型的转换为数字型，得到是整数
        console.log(parseInt('3.14'));//3 取整
        console.log(parseInt('3.94'));//3 取整
        console.log(parseInt('120px'));//120 会去掉px这个单位
        console.log(parseInt('rem120px'));//NaN
        //2、parseFloat(变量)可以把字符型的转换为数字型，得到是小数，浮点数
        console.log(parseFloat('3.14'));//3.14
        console.log(parseFloat('120px'));//120 会去掉px这个单位
        console.log(parseFloat('rem120px'));//NaN
        //3、利用Number(变量)
        var str = '123';
        console.log(Number(str));
        console.log(Number('12'));
        //4、利用了算数运算- * 即隐式转换
        console.log('12'-0);//12
        console.log('123'-'120');
        console.log('123' * 1);
</script>

在这里插入图片描述
转换成布尔型

  • 代表空、否定的值会被转换成false，如0、NaN、null、undefine
  • 其余值都会被转换成true
console.log(Boolean(''));//false
console.log(Boolean(0));//false
console.log(Boolean('你好吗'));//true

3.运算符

运算符也被称为操作符，是用于实现赋值、比较和执行数运算等功能的符号

3.1 算数运算符

+加，-减，*乘，/除，%取余

算数运算符有优先级，先乘除后加减，有小括号先算小括号里面的

console.log(0.1 + 0.2);//0.30000000000000004
console.log(0.07 * 100);//7.000000000000001

这就是因为0.2和0.1被转换为二进制进行相加再转换为十进制表示出来，浮点数值的最高精度是17位小数。不要直接判断两个浮点数是否相等。

3.2 递增和递减运算符

  • 前置递增（递减）运算符：++或–放在变量前面
    ++m 相当于m = m + 1
    --m 相当于m = m - 1
  • 后置递增（递减）运算符：++或–放在变量后面
    m++ 相当于m = m + 1
    m-- 相当于m = m - 1
  • 两者区别
    前置运算符先运算后返回值，后置运算符先返回值再运算
var a = 10;
console.log(a++);//10
console.log(a);//11
var b = 10;
console.log(++b);//11
console.log(b);//11
  • 两者共同点：都只能和变量一起使用
    如果单独使用，其效果是一样的
var a = 10,b = 10;
a++;
++b;
console.log(a);//11
console.log(b);//11

3.3 比较（关系）运算符

比较运算符是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true或false）作为比较运算的结果

运算符名称说明
<小于
>大于
>=大于等于号
<=小于等于号
==判等号（会把字符串型转为数字型再进行比较）
!=不等号
=== !==全等 要求值和数据类型都一致（不会自动转型）

3.4 逻辑运算符

在这里插入图片描述
当是布尔值参与逻辑运算时

  • 逻辑与：两边都是true才返回true
  • 逻辑或：两边都是false才返回false
  • 逻辑非：取反

当是值或表达式参与逻辑运算时

短路运算–当有多个表达式时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值

  • 逻辑与短路–表达式1 && 表达式2
    若表达式1为真，则返回表达式2，若表达式1为假，则返回表达式1
  • 逻辑或短路–表达式1 || 表达式2
    若表达式1为真，则返回表达式1，若表达式1为假，则返回表达式2

3.4 赋值运算符

赋值运算符说明
=直接赋值
+=、-=加、减一个数后再赋值
*=、/=、%=乘、除、取模后再赋值

3.5 三元运算符

条件表达式？表达式1：表达式2
执行思路：如果条件表达式结果为真，则返回表达式1的值，如果条件表达式结果为假，则返回表达式2的值

var m = 10;
var result = m > 5 ? '是的':'不是的';

3.6 运算符优先级

在这里插入图片描述

四、流程控制

在这里插入图片描述

4.1 顺序结构

没有特定的语法结构，程序会按照代码的先后顺序依次执行，程序中大多数的代码都是这样执行的

4.2 分支结构

由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码，（执行代码多旋一的过程）从而得到不同的结果

  • if分支语句
if(表达式){
     执行语句
}

如果if里面的条件表达式结果为真，则 执行大括号里面的执行语句，否则执行if语句后面的代码

  • switch分支语句
    switch语句也是多分支语句，他用于基于不同的条件来执行不同的代码，当要针对变量设置一系列的特定值的选项时，就可以使用switch，需要特别注意的是，①要判断的值与case里的值进行匹配的时候是全等，数值和数据类型一致才可以②break一定不要忘记加，如果当前的case里面没有break，则不会退出switch，而是继续执行下一个case
    在这里插入图片描述

4.3 循环结构

for循环

在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行取决于循环的终止条件。由循环体即循环的终止条件组成的语句被称之为循环语句。

for(初始化变量;条件表达式;操作表达式){
	//循环体
}
  1. 初始化变量，就是用var声明的一个普通变量，通常作为计数器使用
  2. 条件表达式，就是用来决定每一次循环是否继续执行，就是终止的条件
  3. 操作表达式，是每次循环最后执行的代码，经常用于对计数器变量进行更新（递增或者递减）

while循环

While语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环。

while(条件表达式){
	//循环体代码
}

执行思路

  1. 先执行条件表达式，如果结果为真，则执行循环体代码，如果为假，则退出循环，执行后面代码
  2. 执行循环体代码
  3. 循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为真，则会继续执行循环体，直到循环条件为假时，整个循环过程才会结束

do while循环

Do while语句其实是while语句的一个变体，该循环会先执行一次代码块，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环

do {
	//循环体
}while(条件表达式)

执行思路跟while不同的地方在于，Do while先执行一次循环体，再判断条件

continue

Continue关键字用于立即跳出本次循环，继续下一次循环

break

break关键字用于立即跳出整个循环

五、数组

数组是指一组数据的集合，数组可以把一组相关的数据一起存放，并提供方便的访问方式。其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。

5.1 数组的创建方式

  1. 利用new创建数组
var arr = new Array();
  1. 利用数组字面量创建数组
var arr = [];
var arr1 = [1,2,'love',true];  //我们数组里的数据一定用逗号分隔

5.2 访问数组元素

索引也叫做下标，用来访问数组元素的序号（数组下标从0开始）

  • 数组可以通过索引来访问、设置、修改对应的数组元素，我们可以通过数组名[索引]的形式来获取数组中的元素，这里的访问就是获取得到的意思
  • 如果只定义了三个元素，访问第四个元素时会显示undefined
  • 使用数组名.length可以访问数组元素的数量（数组长度）
var arr = [1,2,3];
console.log(arr.length);//这个值是3

5.3 新增数组元素

  1. 修改数组长度
  2. 修改数组索引
var arr = [1,2,3];
arr[3] = 4;//新增了4这个元素

注意：不要直接给数组名赋值，否则会覆盖掉之前的数组元素

六、函数

在JS里面可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。虽然for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用JS中的函数
函数就是封装了一段可被重复调用执行的代码块，通过此代码块可以实现大量代码的重复使用

6.1 函数的使用

<script>
        函数使用分为两步：声明函数 和 调用函数
        1、声明函数
        方法一：function 函数名(){
            //函数体
        } 
        方法二：var 变量名 = function(){};
        2、调用函数
        方法一：函数名();
        方法二：变量名();
</script>

函数的封装

函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口。

6.2 函数的参数

我们可以利用函数的参数实现函数重复不同的代码

  • 形参–在声明函数的小括号里面是形参
  • 实参–在调用函数的小括号里面是实参

实参传递给形参

形参是用来接受实参的在声明函数时，可以在函数名称后面的小括号中加一些参数，这些参数被称为形参。而在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参

参数的作用：在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去

函数表达式也可以进行传递参数

<script>
      var fun = function(aru){
          console.log(aru);
      }
      fun('我爱你');
</script>

在这里插入图片描述

6.3 函数的返回值

我们函数只是实现某种功能，最终的结果需要返回给函数的调用者。只要函数遇到return，就把后面的结果返回给函数的调用者，即函数名（） = return后面的结果

function getResult(){
           return 666;
       }
getResult();//getResult() = 666
  • 而return后面如果有代码也不会被执行，函数遇到return后就终止了
<script>
       function getResult(num1,num2){
           return num1,num2;//最后只会返回num2
       }
       console.log(getResult(1,2));//a = 2

       function fun(num1,num2){
           return [num1 + num2,num1 - num2,num1 * num2,num1 / num2];//返回的是一个数组
       }
       console.log(fun(1,2));
</script>

在这里插入图片描述

  • 如果函数没有return则返回undefined

6.4 arguments的使用

当我们不确定有多少个参数传递的时候，可以用arguments来获取，在js中，arguments实际上是当前函数的一个内置对象，所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。
arguments展示形式是一个伪数组，因此可以进行遍历，具有以下特点：

  • 具有length属性
  • 按照索引方式存储数据
  • 不具有数组的push、pop方法
<script>
       function getResult(){
           console.log(arguments);
       }
       getResult(1,2,3,4,5);
</script>

在这里插入图片描述

七、作用域

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

局部作用域

在函数内部就是局部作用域，局部作用域也叫函数作用域

全局作用域

整个script标签，或者是一个单独的js文件

<script>
      var num = 10;//全局作用域
      console.log(num);
      function fun() {
      	  //局部作用域
          var num = 20;
          console.log(num);
      }
      fun();
</script>

在这里插入图片描述
在同一作用域下如果变量名相同会起冲突，但如果在不同作用域下则不会

7.1 变量的作用域

根据作用域的不同，变量可以分为两种

  • 全局变量–在全局作用域下的变量，在代码的任何位置都可以使用
  • 局部变量–在局部作用域下的变量，只能在该函数内部使用

注意：
①如果在函数内部，没有声明直接赋值的变量也属于全局变量
②函数的形参也可以看做是局部变量
③从执行效率来看
全局变量只有浏览器关闭的时候才会销毁，比较占内存资源，而局部变量当我们程序执行完毕就会销毁

7.2 作用域链

根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链

八、预解析

Javascript代码是由浏览器中的javascript解析器来执行的。javascript解析器在运行javascript代码的时候分为两步，预解析和代码执行

<script>
        console.log(num);//报错 Uncaught ReferenceError: num is not defined
        
        console.log(num1);//返回undefined
        var num1 = 10;

        fn();
        function fn() {
            console.log(11);//可以正常调用函数，返回11
        }

        fun();//报错 Uncaught TypeError: fun is not a function
        var fun = function() {
            console.log(22);
        }
</script>

预解析
JS引擎会把JS里面所有var还有function提升到当前作用域的最前面

预解析分为变量预解析（变量提升）和函数预解析（函数提升）

  • 变量预解析
    变量预解析就是把所有的变量声明提升到当前的作用域最前面，不提升赋值操作
		console.log(num1);//返回undefined
        var num1 = 10;
        //相当于执行了以下代码
        var num;
        console.log(num1);
        num = 10;

        fun();//报错 Uncaught TypeError: fun is not a function
        var fun = function() {
            console.log(22);
        }
        //相当于执行了以下代码
        var fun;
        fun();
        fun = function() {
            console.log(22);
        }
  • 函数预解析
    就是把所有的函数声明提升到当前作用域的最前面，不调用函数
        fn();
        function fn() {
            console.log(11);//可以正常调用函数，返回11
        }
        //相当于执行了以下代码
        function fn() {
            console.log(11);
        }
        fn();

但下面这段代码不是用function关键字声明的，就不会有函数提升的效果

        fun();//报错 Uncaught TypeError: fun is not a function
        var fun = function() {
            console.log(22);
        }

代码执行
按照代码书写的顺序从上往下执行

九、对象

9.1 什么是对象

现实生活中，万物皆对象。对象是一个具体的事物，看得见摸得着的实物。例如，一本书、一辆汽车、一个人可以是对象，一个数据库、一张网页、一个与远程服务器的连接也可以是对象
在javascript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等

对象是由属性和方法组成的。

  • 属性–事物的特征，在对象中用属性来表示
  • 方法–事物的行为，在对象中用方法来表示

9.2 为什么需要对象

保存一个值时可以使用变量，保存多个值，一组值时可以使用数组，要保存一件事物的完整信息，可以用对象
在这里插入图片描述

9.3 如何创建对象

  • 利用字面量创建对象
<script>
        var obj = {
            name: '圆圆',
            age: 18,
            sex: '女',
            sayHi: function() {
                console.log('hi');
            }
        }
</script>

里面的属性或者方法，我们采用键值对的形式。（键：属性名；值，属性值）多个属性或者方法，中间用逗号隔开。方法冒号后面跟的是一个匿名函数。

  • 利用new Object创建对象
<script>
        var obj = new Object();
        obj.name = '乖乖';
        obj.age = 18;
        obj.sex = '女';
        obj.sayHi = function() {
            console.log('hi');
        }
</script>

我们是利用等号赋值的方法添加对象的属性和方法，每个属性和方法之间用分号隔开

  • 利用构造函数创建对象
    前面两种创建对象的方式一次只能创建一个对象，因此我们可以利用函数的方法，重复这些相同的代码，我们就把这个函数称为构造函数，这个函数和其他函数不一样，里面封装的不是普通代码，而是对象。构造函数就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面，主要用来为对象成员变量赋初值，它总与new运算符一起使用
    声明构造函数
    构造函数名首字母要大写且不需要return就能返回结果
function 构造函数名() {
	this.属性 = 值;
	this.方法 = function() {}
}

使用构造函数
我们要调用构造函数就必须使用new

new 构造函数名();

<script>
        function Star(name,age,sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
        }
        var ysx = new Star('虞书欣',18,'女');//调用函数返回的是一个对象
        console.log(typeof ysx);//object
</script>

构造函数和对象

构造函数泛指一大类，类似于Java中的类，而对象是指一个具体的事物，我们利用构造函数创建对象的过程也称为对象的实例化

9.4 如何使用对象

调用对象的属性

①我们采取对象名.属性名的方式

console.log(obj.name);

②还有一种方法：对象名[ ’ 属性名 ’ ]

console.log(obj['name']);

调用对象的方法

我们采取对象名.方法名的方法

obj.sayHi();

9.5 new关键字

new的执行思路

  1. 构造函数可以在内存中创建一个空的对
  2. 让this关键字指向刚才创建的这个新对象
  3. 执行构造函数里面的代码，给这个空对象添加属性和方法
  4. 返回这个新对象，所以构造函数里不需要return

总结

恍惚之间，我已经是第五次写博客了，学校居然还没解封（狗头）

变量、属性、函数、方法的区别

  1. 变量和属性
    变量和属性的相同点：他们都是用来存储数据的
    变量和属性的不同点：变量单独声明并赋值，使用的时候直接写变量名，单独存在；属性在对象里面，是不需要声明的，使用的时候必须是对象名.属性名

  2. 函数和方法
    函数和方法的相同点：都是实现某种功能
    函数和方法的不同点：函数是单独声明并调用的。函数名（）是单独存在的。方法在对象里面，调用的时候 对象.方法（）

本周我们了解了JavaScript并学习了他的基础语法，知道了JavaScript应该如何使用，也知道了他在网页设计和前端开发中不可或缺的重要作用，让我们继续加油，一点一点让我们的网页越来越好！！

mengweiwei_
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值