3.JavaScript

最新推荐文章于 2024-10-11 17:39:47 发布

超高中级的咸鱼

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量42

点赞数

分类专栏：前端文章标签： javascript java 前端

本文链接：https://blog.csdn.net/qq_17686059/article/details/129777090

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、简介

虽然叫JavaScript，但是和Java关系不大！

特点：

解释型语言
类似于C和Java的语法结构
动态语言
基于原型的面向对象

格式：

<script type="text/javascript">
...
</script>

type默认即为text/javascript，所以type="text/javascript"可以省略

输出：

alert(“…”)
document.write(“…”)
console.log(“…”)

编写位置

script标签中

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

外部js文件中，然后通过script标签引入（script一旦用于引入外部js文件，这个script标签就不可用于编写内部js代码，会被浏览器忽略）；
```
<script type="text/javascript" src="js/myjs.js"></script>
```

on事件（onclick等）的属性中

<button onclick="alert("hello,world!");">
    点我一下！
</button>

超链接a的href属性中

<a href="javascript:alert("hello,world!");">点我一下</a>

二、基本语法

注释、基本要求

多行注释：

注释

单行注释：

…//注释

严格区分大小写；
每条语句以分号结尾
Js中会忽略多个空格和换行

字面量和变量

通俗的讲就是常量和变量；

变量的声明和赋值：

var a;		//声明
a=100;		//赋值
var b=5;		//可以同时

标识符

JS中所有可以由我们自主命名的都可以称为标识符；例如：变量名、属性名、函数名、等等…

标识符必须遵守：

不能以数字开头；
不能使用JS中的关键字和保留字，如if、var等…
可以含有字母、数字、_ 、$
驼峰命名法

数据类型

JS中有六种数据类型：

String 字符串

Number 数值

Boolean 布尔值

Null 空值

Undefined 未定义

Object 对象

前五种是基础数据类型，对象是引用数据类型；可以使用typeof + 变量来检查数据类型

字符串Sting

需要用引号括起来，单双都行，但别混用；字符串里可以使用转义字符\” 表示双引号，转义字符用法参考java

数值Number

所有数值都是Number类型，包括整数、浮点数

Number.MAX_VALUE：1.79769…e+308

Number.MIN_VALUE：5e-324

Infinity：正无穷；

-Infinity：负无穷；

NaN：Not a Number，检查NaN时也会返回Number

布尔值Boolean

略

空值Null

表示一个为空的对象；

检查Null数据时，返回Object；

未定义Undefined

声明了变量但没有赋值时，数据类型为Undefined

数据类型转换

转String：

.toString()方法
String( data )函数

转Number：

Number（data）函数
- 纯数字 > 数值
- 含非数字 > NaN
parseInt（data）函数
- 可以将字符串中有效整数内容提取出来
parseFloat（data）函数
- 可以将字符串中有效小数内容提取出来

运算符

略

条件语句、循环语句

同Java

提示框输入函数

var a = prompt("提示的文字内容")

三、进阶语法

对象的分类：

内建对象
宿主对象
自定义对象

对象

创建对象：

var 对象名 = new 构造函数();

或

var 对象名 = {}

向对象添加或修改属性：

对象名.属性名 = 属性值;

或者

对象名["属性名"] = 属性值	//这种形式定义的属性,读取和删除的时候也需要采用这种形式

属性值可以是任意数据类型，即属性值可以也是对象（包括函数）；

删除属性:

delete 对象名.属性名

函数

函数也是一个对象

创建函数：

var 函数名 = new Function("...函数体"); //不建议这样创建,

可以将需要封装的代码以字符串的形式传递给构造函数;

或：

var 函数名 = new Function(形参1,形参2,形参3...){
    函数体...;
}

function 函数名(形参1,形参2,...){
    函数体...;
}

匿名函数：（整个匿名函数的代码块本质是一个对象）

function(){
    函数体...;
}

函数的返回值

可在函数体内定义一个变量，用于存储函数执行结果并返回；

立即执行函数

(匿名函数)([形参]);

eg:

(function(){
    alert("hello,world!");
})();

作用域

全局作用域
- 直接编写在script标签中的JS代码，都在全局作用域；
- 全局作用域在页面打开时创建，关闭时销毁；
- 在全局作用域中有一个全局对象window，创建的变量会作为window对象的属性保存，即var a ，这个a 与window.a等价。
- 全局变量
函数作用域
- 调用函数时，创建函数作用域，函数执行完毕后作用域销毁；
- 函数中的变量会优先在自己的函数作用域中寻找，如果没有则在上一级中寻找，直至全局作用域。

声明提前（在各作用域中生效）

变量的声明提前：指使用var关键字声明的变量（包括函数），会在所有代码执行前被声明，（但是不会赋值）；
函数的声明提前：指使用function关键字形式创建的函数，会在所有代码执行前被创建，即即使函数在代码最后，也可以在代码最开始调用该函数。

不好意思哈，我也只是一个小白，我只刷过flyme，其他系统我也不太了解

四、真正入门

this

解析器在调用函数时，都会向函数内部传递进一个隐含的参数，这个参数就是this，this指向的是一个对象：

以函数形式调用时，this为window；
以方法形式调用时，this为调用那个方法的对象；

使用工厂方法创建对象

要创建多个对象时，并且这些对象结构相同或相似，可以使用函数封装这些创建对象的代码，返回值为一个对象，后面可以使用此函数批量创建对象。（类似于类）

构造函数

使用工厂方法创建的对象，构造函数都是Object。所以创建的对象都是Object类型，导致不能区分对象的类型；

与工厂方法不同，构造函数并不需要返回一个对象，而是在新建对象时使用new 关键字新建一个对象（因为函数也是对象）

JS里的构造函数就可以理解为Java里的类了，构造函数名即类名，首字母大写，

eg：

function Person(name,age,gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
    getinfo = function(){
        alert("姓名："+this.name+",年龄："+this.age+"，性别："+this.gender)
    }
}
var p1 = new Person("张三",18,"男");
var p2 = new Person("李四",19,"男");
var p3 = new Person("王五",20,"女");
p1.getInfo();
p2.getInfo();
p3.getInfo();

原型对象

使用上述构造函数创建对象时，每创建一个对象实例，就会创建一个实例方法，创建10000个实例就会存在1000个”不同“的实例方法，但这些方法实现的功能是完全相同的。这时可以使用原型对象来规避这种现象，提升效率。

原型prototype，每创建一个函数，解析器都会向函数中添加一个属性prototype，这个属性值为一个对象，即原型对象。

当函数作为普通函数被调用时，prototype没有任何作用；

当函数作为构造函数被调用时，它所创建的对象们都会有一个隐含属性_ _ proto _ _ ,它会指向构造函数的原型对象

可以理解为，原型对象就是类的一个静态成员，该类的所有实例都可以通过原型对象的属性名来访问存储在原型对象里的属性值（直接通过属性名就可以访问，不需要写prototype.属性名）

eg：

function Person(name,age,gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
}
//向原型对象中添加成员
Person.prototype.getInfo = function(){
        alert("姓名："+this.name+",年龄："+this.age+"，性别："+this.gender)
    }
var p1 = new Person("张三",18,"男");
var p2 = new Person("李四",19,"男");
var p3 = new Person("王五",20,"女");
p1.getInfo();
p2.getInfo();
p3.getInfo();

原型对象也是对象，也有原型对象，一般情况下原型对象的原型对象就是Object

原型对象的调用逻辑是：如果实例里有此属性，则优先使用此属性，没有则使用原型对象里匹配的属性，再没有则使用原型对象的原型对象里匹配的属性

所以可以向原型对象中添加Object里已有的方法来达成重写的目的，比如toString()

数组

数组Array是一个内建对象；

//使用对象新建一个空数组
var a = new Array();
//赋值
a[0] = 1;
a[1] = 10;
//使用对象创建一个有值数组
var b = new Array(1,2,3)
//注意，括号内为单值时，意思是创建一个长度为该值的空数组；
//使用字面量创建一个空数组
var c = [];
//使用字面量创建一个有值数组；
var d = [1,2,3];