备案控制台
开发者社区 开发与运维 文章 正文

JavaScript基础语法篇超详解

2024-05-23 21
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： JavaScript基础语法篇超详解

一. 什么是JavaScript?

       概念

       JavaScript简称JS. JS是世界上最流行的编程语言之一, 它是一个脚本语言, 通过解释器运行, 主要在客户端(浏览器)运行, 现在也可以基于node.js在服务器上运行.

       JS是一种具有函数有限的轻量级, 解释型 或即时编译型的编程语言. 虽然他是作为开发web页面的脚本语言而出名, 但是他也被用到了许多非浏览器环境中, JS基于原型编程, 多凡事的动态脚本语言. 并且支持面向对象, 命令式, 声明式, 函数式编程范式.

       JS是在1995年有NetScape公司的Brendan Eich, 在网景导航者留恋其上首次设计实现而成, 因为Netscape与Sun合作, NetScape管理层希望他看起来更像Java, 因为取名为JavaScript, 但实际上他和Java没有无任何关系, JS在实际上的语法风格和Self和Scheme较为接近.

       JavaScript可以做的事情

  • 网页开发
  • 网页游戏开发
  • 服务器开发(node.js)
  • 桌面程序开发
  • 手机App开发

       JavaScript和HTML, CSS之间的关系

       简单来说:

  • HTML是一种超文本标记语言, 提供网页的结构, 提供网页中的内容, 是网页结构中的骨架
  • CSS 用来美化页面, 变现为页面的外表
  • JavaScript: 网页的行为, 用来控制网页的内容, 给网页增加动态效果.

       JavaScript运行过程

  • 编写的代码保存在文件当中,  也就是存储在硬盘(外存上)
  • 双击.html文件, 浏览器就会读取文件, 把文件加载到内存当中去.
  • 浏览器会解析用户编写的代码, 把代码翻译成二进制文件, 能够让计算机CPU识别,并解释工作
  • 得到的二进制指令被CPU加载并执行.

二. 基础语法篇

       第一个JavaScript程序

       我们说HTML是网页的骨架, 我们在编写JavaScript代码的时候需要HTML的框架, 也就是说, 在HTML文件中来书写JavaScript语句, 通常会使用Html中的script标签, 来将JavaScript语句包含在script标签当中.:

    <script>
        alert("hello world!")
    </script>

我们点击预设好的HTML文件:

显示如下:

alert是JS中的一个弹出警告窗口, 括号里面的内容为提示内容. 此处的提示内容为hello world

        JS的书写形式

  • 行内式
    什么叫做行内式呢? 也就是直接将JS语句嵌套到HTML元素的内部, 这就称为行内式, 例如, 我们设计一个按钮, 点击这个按钮可以弹出hello world提示内容的弹窗< 首先可以想到的是input标签:
<input type="button" value="我是一个按钮" onclick="alert('hello world')">
  • 随后代开html页面如下:

    点击这个<我是一个按钮>, 将会显示如下弹窗内容:

    注意 : 在JS中的字符串可以是单引号引起的, 也可以是双引号引起的字符串, 但是在配合THML使用的时候一定要注意避免使用引号而导致的截断.
  • 内嵌式
    也就是我们上面所说的, 将JS语句写入到HTML的script标签中, 例如我们上面使用的alert弹窗:
    <script> alert("hello world") </script>, 但是如果你直接使用alert("hello world"), 就不会被浏览器识别为JS语法, 例如:
<body>
    <script>
        alert("hello world")
    </script>
</body>
  • 将会在浏览器直接显示:

    并不会将alert识别为一个JS弹窗
  • 外部式
    也就是通过外部引用的方式使用js代码, 使用外部的JS文件, 来导入js代码, 例如使用html的scrip标签中的src属性来指定js文件:

    在js文件中就可以编写js代码, 例如我们在这个toos.js中直接写入一行js代码:alert("hello world"), 就会被识别, 然后成功弹出

       JS的代码注释

  • 单行注释//
    直接要在被注释的一行前面使用双反斜杠//, 来表示这样一整行都被注释, 例如:
// alert("hello world")
  • 多行注释/*被注释的多行内容*/
    多行注释和单行注释的用法和java差不多, 例如:
<body>
    <script>
        var name = prompt("请输入您的名字")
    </script>
</body>
  • 但是不建议多行注释的嵌套使用, 例如

    这样子使用就会直接报错

       输入输出

  • 输入框prompt
    使用prompt可以弹出一个输入框, 例如, 我们编写如下代码
<body>
    <script>
        var name = prompt("请输入您的名字")
    </script>
</body>
  • 就会在html页面显示:

    这个prompt哈数有一个返回值, 这个返回值就是用户输入的值. 我们可以使用的一个变量来接收这个值
  • 警告窗alert
    之前展示过, 使用alert函数, 可以触发一个弹出告示窗口, 函数的参数是一个字符串, 这个字符串被作为提示内容.
  • 控制台日志console.log
    这个是在控制台打印一个日志, 供给程序员查看的, 例如:
    console.log("这是一个日志!!")

    日志是作为程序员调试程序的重要手段

       变量的使用

       JavaScript变量, 使用来存储信息的容器, 例如:

var x = 1;

var y = 2;

var z = x + y;

就像代数那样, 使用字母来保存值, 上述表达式中我们可以计算出z的值为3. 这些形如xyz的字母被成为变量名

               变量命名

  • 除了xyz之外, 我们可以使用更加具有标识性的名称, 例如平均数使用avg作为变量名
  • 变量可以使用字母开头
  • 变量名不能以数字开头
  • 变量名也能使用$进而_符号开头, 但是不推荐这样子命名
  • 变量名对大小写敏感

               数据类型

       除了整数之外, JavaScript还可以保存其他数据类型, 录入文本值(var name = "ZhangSan"), 在js中, 类似于"ZhangSan"这样的文本被称为字符串(除了双引号, 也可以使用单引号在js中), JS中除了文本和整形, 还有其他的很多种数据类型.

       当你向变量分配文本值的时候, 应该使用双引号或者单引号包围这个值, 如果向变量赋值的是数值时, 不用使用引号, 如果被引号包围, 就会被当做文本处理, 例如var x = 1和var x = "1"是两个不同的处理方式

               变量的声明和使用

1. 声明一个变量

我们声明一个name变量,来记录名字:

var name

对变量name进行赋值, 并输出到alert作为提示内容:

name = "ZhangSan"

alert(name)

2. 一条语句多个变量:

我们可以在一行语句中, 声明多个变量, 使用var做为开头 , 中间多个变量, 使用逗号作为分割:

var index1, index2, index3 .....

或者

var index1 = "case1", index2 = "case2", index3 = "case3" .....

如果这样赋值:

var index1, index2, index3 = "case3";

那么index1, 和index2是未被定义的, 而index3 = "case3"

3. 重新声明变量

例如, 我们定义一个变量name , 给其赋值之后, 然后再次定义这个变量name

var name = "ZhangSan"

var name

alert(name)

编写如上代码, 并执行:

此时任然可以正常显示, 也就是说, 在JS中, 重新生成变量不会导致该变量的值丢失.

                理解动态类型

       js中的关键字var有点类似于java中的关键字var, 可以自动识别数据类型, js中的变量是程序运行的过程中才能确定的, 这也就一位置, 相同的一个变量可以拥有不同的数据类型, 例如:

var x = 1;

var x = "hello world";

       这个过程中, x的数据类型从数字类型转变为了字符串类型.

       假如, 这里有一个变量, 但是你不知道他的类型, 那么你可以使用typeof操作符来查看, 例如:

var x = "hello world";

var ret = typeof  x;

alert(ret);

输出:

                JS变量类型

JS的变量类有以下几种:

  • number: 数字类型, 小数和整数统称为数字类型
  • boolean: true表示为真, false为假.
  • string: 字符串类型
  • undefined: 只有唯一的值undefined表示未定义的值
  • null: 表示空值

1. number

JS中不区分整数和浮点数, JS中的整数和浮点数统称为数字类型. 例如:

var x = 1;

var y = 1.322;

上面这个x和y都表示数字类型

JS中的数字类型有几个表示方法:

  • 十进制, 就是直接使用类似这种: var  x = 1; 这种就是十进制的定义方法
  • 八进制, 形如var x = 07这样的, 其中八进制的数以0开头
  • 二进制, 形如var x = 0b1011, 0b表示二进制,后面的"1011"表示数据位.
  • 十六进制: 形如var x = 0xabc, 0x表示16进制

对于2进制来说, 每四位表示一个16进制数, 每三位表示一个8进制数, 以此类推

除了这些之外, 还存在着一些特殊的数字类型的值:

  • Infinity: 表示无穷大, 大于任何数字, 表示的数字已经超过了JS的能表示的范围
  • -Infinity: 表示负无穷大, 小于任何数字, 表示数字已经超过了JS能表示的范围
  • NaN: Not a Number, 表示当前的结果不是一个数字

我们在html页面进行输出查看者三个情况:

var MAX = Number.MAX_VALUE;//通过这个方法可以获取到Number的最大值, 也就是Infinity

// 然后使用控制台进行输出查看

console.log( max * 2)

console.log( -max * 2)

console.log('hello world' - 10)

运行结果依次为如上图

2. String

       字符串的字面常量需要使用引号(单引号和双引号都可以, 但是需要注意不能发生截断等语法错误), 例如:

var str1 = "hello world"

var str2 = "hello java"

如果使用的字符串没有赋值将会报错, 例如:

var str3 = hello java and world; // 如果没有使用引号就会直接报错.

       但是如果想要使用的字符串里面已经包含了引号, 这个时候为了避免发生截断该怎么办. 我们可以使用转义字符, 例如:

var str1 = "this is a "dog"" ; // 此种情况发生了截断, 会发生报错

var str2 = "this is a \"dog\""; // 对把dog包围的引号进行的转移, 让他来表示字符串内部的引号

var str3 = "this is a 'dog'"; // 如果单引号冲突, 那么可以使用双引号和单引号搭配使用,

var str4 = 'this is a "dog"';

       求字符串的长度可以使用length属性来查看, 例如:

var str = "hello world"

var len = str.length

console.log(len);

结果如下:

       JS中的字符串也有类似于java中String类的字符串拼接, 例如我们可以将两个字符串拼接在一起:

var str1 = "this is a ";

var str2 = "dog"

console.log(str1 + str2)

输出如下:

        同时字符串也可以和数字类型的数据进行拼接:

var str = "my age is: "

var age = 18;

console.log(str + age)

运行结果如下:

        我们在使用字符串加法的时候, 一定要看清相加的数据是否存在字符串, 例如:

console.log(100 + 100)

console.log('100' + 100)

console.log(100 + '100')

输出结果为:

可以发现, 和数字类型拼接的时候, 如果字符串存在, 那么最后的类型就会被直接拼接为一个字符串.

       String和boolean类型的的拼接:

var boo = false;

var str  = "this is "

console.log(str + boo)

       如果一个数据命名了但是没有定义 此时拿来和字符串拼接:

var name;

var sentence = "my name is :" + name;

console.log(name)

console.log(sentence + name);

结果确实null? 这是为什么呢? 原因是, undefined派生自null, 可以通过相等和全等来判断. 例如:

console.log(undefined == null) // true;

console.log(undefined === null) // false;

结果如下:

3. null

null表示当前变量是一个空值, 例如:

var x = null;

console.log(x); // null值直接输出

console.log(x + 1); // 空值 + 1 然后输出

console.log(x + "1"); // 空值和字符串拼接

可以看到通过控制台直接输出null值, 会显示null, 如果空值 + 1 的话, 会直接显示1, 也就是null被当做了0, null值和字符串会直接进行拼接.

4.boolean

       布尔逻辑只能有两个值, true或者false,

var x = true;
var y = false;

布尔常用在条件测试中.

               JS数组

下面是JS中数组的创建和使用相关:

var names= new Array();
names[0] = "ZhangSan";
names[1] = "LiSi";
names[2] = "WangWu";
// 或者
var names = new Array( "ZhangSan", "LiSi", "WangWu");
// 或者
var names = [ "ZhangSan", "LiSi", "WangWu"];

数组下表是基于0的, 所以第一个项目是0, 第二个下表是1, 以此类推.

对于new Array(); 其中A必须大写, 当然除了放一样的元素, 也可以存放不同的数据类型

访问数组的长度, 使用点号"."访问数组的length属性.

var arr = [1, 2, "ZhangSan"] // 也可以使用var arr = new Array();
// 当然也可以对数组增加内容, 使用push函数
arr.push(3)
arr.push("LiSi")
// for循环遍历数组
for(var i = 0; i < arr.length; i++) {
    console.log(arr[i])
}

对于数组的遍历, 还有下面这个方法. 也就是我们Java中常用的for-each增强for循环

for(var x of arr) {
        console.log( x );
}

效果是一样的(都是默认从0下标开始遍历)

但是如果访问元素超过了数组的限定下标, 例如现在一个数组arr里面存在4个元素, 如果你使用如下语句:

console.log(arr[-1]);
// 或者
console.log(arr[4]);  // 数组下标越界而产生错误
这两者产生的结果为undefined

修改数组元素, 直接使用下标访问然后修改即可:

var arr = new Array();
arr.push(1)
arr.push(2)
arr.push(3)
arr[2] = 4

那么如何删除元素呢? 是否可以将数组的某个下标的值设置为null?

var arr = new Array();
arr.push(1)
arr.push(2)
arr.push(3)
arr[0] = null
for(var x of arr) {
        console.log( x );
}

可以看到并没有删除下标为0的元素, 只是简单的将这个下标为0的元素置为了null

对于删除, 我们可以使用arr的splice(var i, var len);

从下标为i 的元素开始, 往后删除len个元素, 如果删除的元素已经超过了数组的尾元素, 则会照常删除, 不会发生异常;

var arr = new Array();
arr.push(1)
arr.push(2)
arr.push(3)
arr.splice(1,2)
for(var x of arr) {
        console.log( x );
}

数组的截取slice(var i, var j), 截取的下标范围为: [ i , j ).

例如:

var arr = new Array();
arr.push(1)
arr.push(2)
arr.push(3)
var ret = arr.slice(0,2) // 截取1和2
for(var x of ret) {
        console.log( x );
}

此外, 删除还可以使用数组的pop()方法, pop方法删除数组末尾元素:

var arr = new Array();
arr.push(1)
arr.push(2)
arr.push(3)
arr.pop() // 删除数组[1,2,3]末尾的数字类型:3
for(var x of arr ) {
        console.log( x );
}

既然可以删除队尾元素, 也可以删除队首元素, 可以使用shift()方法来删除一个数组的队首元素

var arr = new Array();
arr.push(1)
arr.push(2)
arr.push(3)
arr.shift() // 删除数组[1,2,3]末尾的数字类型:3
for(var x of arr ) {
        console.log( x );
}

       运算符

                       算术运算符

  • +
  • -
  • *
  • /
  • %

                       赋值运算符 & 复合赋值运算符

  • =
  • +=
  • -=
  • *=
  • /=
  • %=

                       自增自减运算符

  • ++
  • --

                       比较运算符

  • <
  • >
  • <=
  • >=
  • == : 比较全等, 会进行隐式类型转化
  • !=
  • ===
  • !== :: 比较相等, 不会进行隐式类型转化

例如我们所说的undefined是派生自null的, 如果直接使用==进行比较null和undefined:

var x = null;
var y = undefined;
console.log(x == y)

结果输出 true, 这是因为undefined会隐式转换为null.

再比如:

如果比较1和字符1两者, 使用== 和===分别进行比较并在控制台输出:
console.log(1 == "1") // true
console.log(1 === "1") // false

结果如下:

因为1会隐式转换为"1", 但是下面的===不会

                       逻辑运算符 & 位运算符 % 移位运算

  • && 与
  • || 或
  • ! 非
  • & 按位与
  • | 按位或
  • ~ 按位取反
  • ^ 按位异或
  • << 左移
  • >> 有符号右移
  • >>> 无符号右移

       条件语句

类似于java中的条件语句, 条件表达式为true则执行{}中的代码块:

// 形式1
if (条件) {                
        // code here
}
// 形式2
if (条件) {
        // code here
} else {
        // code here
}
// 形式3
if (条件1) {
        // code here
} else if (条件2) {
        // code
} else if (条件....) {
        // code
} else {
        // code
}

代码练习:

       输入一个数字, 判断这个数字是奇数还是偶数:

<body>
    <script>
        var num = prompt("请输入一个数字:->")
        if (num % 2 == 0) {
            alert("您输入的数字" + num + "是一个偶数")
        } else {
            alert("您输入的数字" + num + "是一个奇数")
        }
 
 
    </script>            
</body>

输入2:

输出:

       三元表达式

三元表达式, 也称为三目运算符, 他是一种if - else 语句的简化写法:

条件 ? 表达式1 : 表达式2

如果条件为真, 返回表达式1的结果, 如果为假, 返回表达式2 的结果.

注意, 三元表达式的优先级是比较低的

       switch-case语句

多分支语句, 和java语言里面的switch- case语句类似.

switch (value) {
        case value1:
                语句1;
                break;
        case value2:
                语句2;
                break;
        case value3:
                语句3;
                break;
        .......
        default:
                语句N;
}

例如. 用户输入一个数字, alert提示今天是星期几:

var day = prompt ( " 请输入今天星期几 : " );
switch ( parseInt ( day )) {
    case 1 :
       alert ( " 星期一 " );
        break ;
    case 2 :
       alert ( " 星期二 " );
        break ;
    case 3 :
       alert ( " 星期三 " );
        break ;
    case 4 :
       alert ( " 星期四 " );
        break ;
    case 5 :
       alert ( " 星期五 " );
        break ;
    case 6 :
       alert ( " 星期六 " );
        break ;
    case 7 :
       alert ( " 星期日 " );
        break ;
    default :
       alert ( " 输入有误 " );
}

这里为什么使用了一个我们没有见过的函数parseInt(Stringx)?

类似于java, parseInt的作用是将一个字符串转化为对应的数字类型.

通过下面这个例子:

输入6:

输出:

发现结果是一个字符串类型

       但是我们的case里面是数字类型, 这也就会造成不匹配, 直接跳转到default的情况, 所以此处需要使用parseInt来将其转化为对应的数字类型

       循环语句

       同java一样, JS也存在着while循环, 格式如下:

while (条件) {
        // code
}

例如: 在控制台打印1 ~ 10:

var num = 1;
while (num <= 10) {
        console.log(num);
        num ++;
}

同Java语言一样, JS中的循环语句同样可以使用continue结束当前循环直接进入下一次循环,

例如上面的例子, 我们遇到5就跳过不打印:

var num = 1;
while (num <= 10) {
        if(num == 5) {
                continue;
        }
        console.log(num);
        num ++;
}

当然也存在着break语句, 将打断循环,

JS也存在着for循环, 其结构如下:

for (表达式1 ; 表达式2 ; 表达式3) {
        循环体
}

其中:

  • 表达式1用来初始化循环变量
  • 表达式2 是循环的条件
  • 表达式3更新循环变量

例如, 使用for循环打印1 ~ 5

for (var i = 1; i <= 5; i++) {
        console.log(num)
}

运行结果如下:

当然如果你希望你的代码至少循环一次, 你也可以使用do-while循环:

       函数

JS中也存在着函数, 也就是所谓的创建函数, 函数声明, 和其函数定义, 例如

               创建函数

// 函数创建与声明和定义
function  函数名( 形参列表 ) {
        函数体
        // 如果有必要的话可以加上return语句;
        // return 返回值;
}
// 调用函数
函数名(参数列表)
// 如果考虑返回值, 可以使用一个参数接收返回值
var  ret = 函数名(参数列表)

       注意: 函数在定义的时候并不会执行函数体和return部分, 只有显式地调用才会执行函数体, 调用几次函数就会执行几次函数体. 和定义变量不同的是, 定义变量是需要先定义变量, 然后才能使用的, 但是函数的定义和使用之间没有明确的顺序的

       例如我们现在定义一个函数hello() 参数体为空, 此时调用hello的时候, 会在控制台输出hello:

function hello() {
        console.log("hello");
}
hello();  // hello()也可以在定义function hello()之前
hello();
function hello() {
        console.log("hello");
}

               关于函数参数

       有参数的函数, 可以传入参数, 并使用这些参数做出对应的行为:

function 函数名(parameter1, parameter2 ....) {
        函数体
        // 有必要时使用return语句
}

        例如: 假设我们输入一个字符串, 然后我们在控制台输出这个字符串.

function input(x) {
        console.log(x);
}
var ret = prompt("请输入一个内容:->");
input(ret);

输出如下:

关于参数的个数, 实参和形参之间的个数可以不匹配, 但是实际开发, 一般要求形参和实参个数要匹配:

  • 如果实参比形参的个数多, 那么多出来的形参不参与函数运算
  • 如果实参个数比形参个数少, 则此时多出来的形参值为undefined

举例说明:

// 定义一个函数, 具有一个形参

              arguments

       arguments用于函数体中, 用来接收函数中的形参, 我们说, 在JS中, 可以存在形参数量和实参数量不匹配的情况, 甚至出现, 没有形参, 但是传入了很多实参的情况, 这个时候 就可以使用arguments来接收这些传入的实参.

       例如定义一个函数:

function  func1() {
    var sum = 0;
    for(let i = 0; i < arguments.length; i++) {
            sum +=arguments[i];
    }
    return sum;
}
console.log(func1(1,2,3,4));

       arguments接收完全部参数之后, 将其放在一个数组里面, arguments本质上就是一个存放着这些参数数据的数组, 我们可以通过下标来解引用. 如上arguments[0]

               函数表达式

       此处有另外一种定义函数的方法, 叫做匿名函数, 也就是如下的形式:

var ret = function(1,2,"hello") {
        let sum = 0;
        for(let i = 0; i < arguments.length; i++) {
                sum +=arguments[i];
        }
        return sum;
}
// 此处的ret作为函数名使用:
console.log(ret(1,2,3));
console.log(ret(10, 20));

        此时形如function() {函数体} 的写法就是定义了一个匿名函数, 然后这个匿名函数用一个变量来表示, 后面就可以通过这个变量ret来调用函数了.

               作用域

       作用域也就是说某个变量或者签名在代码中的有效范围

       例如我们有如下例子:

// 全局变量
var num = 10 ;
console . log ( num );
function test () {
    // 局部变量
    var num = 20 ;
    console . log ( num );
}
function test2 () {
    // 局部变量
    var num = 30 ;
    console . log ( num );
}
test ();
test2 ();
console . log ( num );
// 执行结果
10
20
30
10

       首先我们定义了一个全局变量var num = 10, 然后在控制台输出num, 随后在方法体test中, 重新定义变量var num = 20, 此时调用test(), 结果输出为20.

       其次定义了一个test2方法, 里面使用的是var num = 30, 调用test2()输出30, 随后再次在控制台输出num, 结果又变回了原来的10.

       总结, 当方法的外部和方法的内部同时存在对同一个变量的赋值时候, 方法体内部的赋值并不会影响外部相同名的变量的值, 在方法体内使用这个变量名, 起作用的将会是方法体内的这个变量名. 但是对这个变量赋值不会影响外部同名变量

       对象

               概念

       Java中, 我们有类和对象的概念, 类, 就是我们把身边的事务的抽象, 对象就是这个抽象的具体化实例.        对比于Java, JS中也存在着对象的概念. 在JS中, 字符串, 数字类型, 数组, 函数等都是对象. 每个对象都有很多属性和方法, 例如数组里面有length属性, 还有push()方法, 可以在数组末尾添加一个元素.

       我们说JS中, 数组也可以保存数据, 例如:

var arr = ["蔡徐坤", 175, 170]

       上面有一组数据, 里面有数据175和170, 对于填写这个数据的人来说, 或者一个真ikun来说, 他可能知道这个175是指的身高, 170指的是体重, 但是如果你让你一个不是ikun的人, 或者是不属于这个数据的设计者的人来说, 他无法分辨这个175到底是身高还是体重.

       所以对象的重要性就不言而喻了.

               使用字面量创建对象

创建一个空对象

var student = {}

创建一个对象, 并向这个对象中添加一些属性和方法

var sutdent = {
                name: '蔡徐坤',
                height:175,
                weight:170,
                sayHello: function() {
                    console.log("hello world!");
                }
            }

其中:

  • 使用{} 来创建一个对象
  • 属性, 方法使用键值对的形式来组织, 也就是, 变量名在左, 数据或者方法体在右, 中间使用冒号":"分割
  • 键值对之间使用逗号","分割, 注意这里的逗号是英文逗号
  • 方法是一个匿名函数体
  • 对于方法的使用, 使用对象+.号(点号)的形式来访问对象的属性和方法

例如:

console.log(student.name);
console.log(student.height);
sutdent.sayHello();
// 同时还可以使用[]来访问属性, 例如
console.log(student['height']);  // 此时的属性需要使用引号包围

               使用new object()创建对象

var student = new object();
student.name = "蔡徐坤";
student.height = 175;
student.weight = 170; // 也可以使用[]来创建属性 student['weight'] = 170
student.sayHello = function() {
        console.log("hello");
}
console.log(student.name);
console.log(student['weight']);
student.sayHello();

如果使用{}来创建对象的话, 也可以使用student.属性名 = value的形式来增加属性

               使用构造函数来创建对象

       使用构造函数来创建对象, 可以很方便的对这个对象进行实例化. 如果一个对象具有很多个实例的话, 推荐使用构造函数来创建对象

function 对象名(para1, para2, para3 ....) {
        this.para1 = para1;
        this.para2 = para2;
        this.para3 = para3;
        ......
        this.func = function() {
                // code here 方法体
        }
}
// 实例化
var exm = new 对象名(para1, para2, para3 ....);

       如何理解这样的new关键字? 首先new会在内存中创建一个空对象{}, 然后根据this指向刚才的空对象, 随后执行构造函数的代码, 给对象创建属性和方法. 返回构建完成的对象

JavaScript是一门很适合去学习的语言, 大家一定要好好学习这门语言


文章标签：
日志服务
JavaScript
前端开发
Java
程序员
存储
关键词：
JavaScript语法
JavaScript基础语法
相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
niceffking
目录
相关文章
前端菜鸟的自我修养
|
17天前
|
JavaScript
细讲Node.js模块化，以及 CommonJS 标准语法导出和导入，详细简单易懂！
细讲Node.js模块化，以及 CommonJS 标准语法导出和导入，详细简单易懂！
前端菜鸟的自我修养
23 2
前端菜鸟的自我修养
|
17天前
|
JavaScript 前端开发
node.js中path模块-路径处理，语法讲解
node.js中path模块-路径处理，语法讲解
前端菜鸟的自我修养
21 2
前端菜鸟的自我修养
|
17天前
|
JavaScript 前端开发
node.js中的fs模块，读写语法讲解
node.js中的fs模块，读写语法讲解
前端菜鸟的自我修养
9 2
叶落闲庭
|
23天前
|
XML JavaScript 前端开发
JavaScript简介&引入方式（JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听）
JavaScript简介&引入方式（JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听）
叶落闲庭
16 2
八百标兵奔北坡
|
26天前
|
JavaScript 前端开发
Symbol在JavaScript中有哪些具体的用法和语法
Symbol在JavaScript中有哪些具体的用法和语法
八百标兵奔北坡
20 1
qiuqiushuibx
|
1月前
|
前端开发 JavaScript 索引
CSS常见用法 以及JS基础语法
CSS常见用法 以及JS基础语法
qiuqiushuibx
26 0
小华qvq
|
1月前
|
JavaScript
JS 基本语法
JS 基本语法
小华qvq
22 1
XError＿xiaoyu
|
1月前
|
JavaScript 前端开发 C语言
JavaScript编程语法练习
本篇文章是对于javaScript中if ,switch,while ,do-while,,for语法的作业练习.对于我来说也是对自己知识掌握的一种检验.是对js的基础语法进行的一次练习,通过有趣的示例进行练习,使得对于代码能够增加印象,对于知识的掌握更加透彻.
XError＿xiaoyu
44 2
米果粒
|
1月前
|
JavaScript 前端开发
JavaScript语法（2）
【5月更文挑战第2天】JavaScript语法（2）。
米果粒
18 3
米果粒
|
1月前
|
存储 JavaScript 前端开发
JavaScript语法
JavaScript语法。
米果粒
12 1