JavaScript高级(1)

最新推荐文章于 2022-06-06 22:27:40 发布
最新推荐文章于 2022-06-06 22:27:40 发布
阅读量122 收藏 1
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/airar/article/details/120627705
版权

1.JavaScript 函数

1.1JavaScript 函数定义

JavaScript 使用关键字 function 定义函数

函数可以通过声明定义，也可以是一个表达式

函数声明

函数的格式 :

function 函数名(参数列表) {

                执行的代码

            }

函数声明后不会立即执行，会在我们需要的时候调用到

3.函数表达式

JavaScript 函数可以通过一个表达式定义

函数表达式可以存储在变量中

匿名函数赋值给一个变量,这时变量的名称就是函数的名称

function() 构造函数

在以上实例中，我们了解到函数通过关键字 function 定义

函数同样可以通过内置的 JavaScript 函数构造器（Function()）定义。

var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);

实际上，你不必使用构造函数。上面实例可以写成：

var myFunction = function (a, b) {return a * b};
var x = myFunction(4, 3);

在 JavaScript 中，很多时候，需要避免使用 new 关键字

函数提升（Hoisting）

在之前的教程中我们已经了解了 "hoisting(提升)"

提升（Hoisting）是 JavaScript 默认将当前作用域提升到前面去的的行为

提升（Hoisting）应用在变量的声明与函数的声明

因此，函数可以在声明之前调用：

myFunction(5);

function myFunction(y) {

return y * y;

}

使用表达式定义函数时无法提升

自调用函数

函数表达式可以 "自调用"

自调用表达式会自动调用

如果表达式后面紧跟 () ，则会自动调用

不能自调用声明的函数

通过添加括号，来说明它是一个函数表达式

函数提升（Hoisting）

在之前的教程中我们已经了解了 "hoisting(提升)"

提升（Hoisting）是 JavaScript 默认将当前作用域提升到前面去的的行为

提升（Hoisting）应用在变量的声明与函数的声明

因此，函数可以在声明之前调用

函数提升（Hoisting）---- 先使用，后定义

变量的提升--- 先使用，后定义

myFunction(5);

function myFunction(y) {

return y * y;

}

使用表达式定义函数时无法提升

自调用函数

函数表达式可以 "自调用"

自调用表达式会自动调用

如果表达式后面紧跟 () ，则会自动调用

不能自调用声明的函数

通过添加括号，来说明它是一个函数表达式

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            (function test5(){
                alert("自动调用")
            })();
        </script>
    </head>
    <body>
    </body>
</html>

函数是对象

在 JavaScript 中使用 typeof 操作符判断函数类型将返回 "function" 

但是JavaScript 函数描述为一个对象更加准确

JavaScript 函数有属性和方法

arguments.length 属性返回函数调用过程接收到的参数个数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function  test6(str){
              alert("参数个数---"+arguments.length);
            }
            //test6("zhangsan");
            var restest6=test6.toString();
            alert(restest6);
        </script>
    </head>
    <body>
    </body>
</html>

1.2JavaScript 函数参数

JavaScript 函数对参数的值没有进行任何的检查。

函数显式参数(Parameters)与隐式参数(Arguments)

在先前我们已经学习了函数的显式参数:

functionName(parameter1, parameter2, parameter3) { // 要执行的代码…… }

函数显式参数在函数定义时列出。

函数隐式参数在函数调用时传递给函数真正的值。

参数规则

JavaScript 函数定义显式参数时没有指定数据类型。

JavaScript 函数对隐式参数没有进行类型检测。

JavaScript 函数对隐式参数的个数没有进行检测。

默认参数

ES5 中如果函数在调用时未提供隐式参数，参数会默认设置为： undefined

有时这是可以接受的，但是建议最好为参数设置一个默认值：

function myFunction(x, y) {

 if (y === undefined) {

 y = 0;

}

 }

或者，更简单的方式：

function myFunction(x, y) {

y = y || 0;

 }

如果y已经定义 ， y || 返回 y, 因为 y 是 true, 否则返回 0, 因为 undefined 为 false。

如果函数调用时设置了过多的参数，参数将无法被引用，因为无法找到对应的参数名。 只能使用 arguments 对象来调用。

ES6 函数可以自带参数

ES6 支持函数带有默认参数，就判断 undefined 和 || 的操作.

通过值传递参数

在函数中调用的参数是函数的隐式参数

JavaScript 隐式参数通过值来传递：函数仅仅只是获取值

如果函数修改参数的值，不会修改显式参数的初始值（在函数外定义）

隐式参数的改变在函数外是不可见的

通过对象传递参数

在JavaScript中，可以引用对象的值

因此我们在函数内部修改对象的属性就会修改其初始的值

修改对象属性可作用于函数外部（全局变量）

修改对象属性在函数外是可见的

1.3JavaScript 函数调用

JavaScript 函数有 4 种调用方式

作为一个函数调用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
           function test1(str){
               alert("函数调用，参数="+str);
           }
           test1("zhangsan");
        </script>
    </head>
    <body>
    </body>
</html>

以上函数不属于任何对象。但是在 JavaScript 中它始终是默认的全局对象

在 HTML 中默认的全局对象是 HTML 页面本身，所以函数是属于 HTML 页面

在浏览器中的页面对象是浏览器窗口(window 对象)。以上函数会自动变为 window 对象的函数

myFunction() 和 window.myFunction() 是一样的

全局对象

当函数没有被自身的对象调用时 this 的值就会变成全局对象

在 web 浏览器中全局对象是浏览器窗口（window 对象）

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
           function test1(str){
               alert("函数调用，参数="+str);
           }
           //test1("zhangsan");
           window.test1("zhangsan");
        </script>
    </head>
    <body>
    </body>
</html>

2.函数作为方法调用

在 JavaScript 中你可以将函数定义为对象的方法

方法属于对象的成员，对象的方法是一个函数，因此函数可以被作为方法调用。

下面实例创建了一个对象 (myObject), 对象有两个属性 (firstName 和 lastName), 及一个方

法 (fullName).

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
           var myObject={firstName:"长江",lastName:"黄河",
            fullName:function(){
                return this.firstName + " " + this.lastName;
            }}
           var name=myObject.fullName();
           alert(name);
        </script>
    </head>
    <body>
    </body>
</html>

使用构造函数调用函数

如果函数调用前使用了 new 关键字, 则是调用了构造函数

这看起来就像创建了新的函数，但实际上 JavaScript 函数是重新创建的对象

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
           function test2(str){
               alert("函数调用，参数="+str);
           }
           //alert(typeof test2)
           var obj1=new test2("zhangsan");
           alert(typeof obj1)
        </script>
    </head>
    <body>
    </body>
</html>

构造函数的调用会创建一个新的对象。新对象会继承构造函数的属性和方法

作为函数方法调用函数

在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法

call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数，两个方法的第一个参数必须是

对象本身

call()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
           function test3(str,age){
               alert("函数调用,参数="+str+",age=="+age);
           }
           var objtest3=test3.call(objtest3,"zhangsan",23);
           apply()
        </script>
    </head>
    <body>
    </body>
</html>

apply()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
           function test4(str,age){
               alert("函数调用，参数="+str+",age=="+age);
           }
           var objtest4;
           var arr=["lisi",24];
           objtest4=test4.apply(objtest4,arr);
        </script>
    </head>
    <body>
    </body>
</html>

2.JavaScript 对象

2.1JavaScript 对象

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...

此外，JavaScript 允许自定义对象

JavaScript 提供多个内建对象，比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊

数据类型

布尔型可以是一个对象

数字型可以是一个对象

字符串也可以是一个对象

日期是一个对象

数学和正则表达式也是对象

数组是一个对象

甚至函数也可以是对象

对象只是一种特殊的数据。对象拥有属性和方法

访问对象属性的语法是：对象名称.属性名称

访问对象方法的语法是：对象名称.方法名称()

创建 JavaScript 对象

通过 JavaScript，您能够定义并创建自己的对象。

创建新对象有两种不同的方法：

使用 Object 定义并创建对象的实例。

使用函数来定义对象，然后创建新的对象实例。

使用 Object

在JavaScript中，几乎所有的对象都是Object类型的实例，它们都会从Object.prototype继承属性和

方法

Object 构造函数，会根据给定的参数创建对象，具体有以下情况：

如果给定值是 null 或 undefined，将会创建并返回一个空对象

如果传进去的是一个基本类型的值，则会构造其包装类型的对象

如果传进去的是引用类型的值，仍然会返回这个值，经他们复制的变量保有和源对象相同的引用地

址

当以非构造函数形式被调用时，Object 的行为等同于 new Object()

语法格式：

new Object([value])

value 可以是任何值

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            var  student1={stuid:1001,
                         stuname:"zhangsan",
                        getStuinfo:function(){
                            alert("student对象的方法");
                            return  this.stuid+"-"+this.stuname;
                        }};
            //alert(typeof student1); //object
            //alert(student1.stuid+","+student1.stuname);
            //var info=student1.getStuinfo();
            //alert(info);
        </script>
    </head>
    <body>
        
    </body>
</html>

使用对象构造器

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function Person(perid,pername){
                this.perid=perid; //属性
                this.pername=pername; //属性
                this.getPerInfo=function(){
                    alert("Person构造函数中的方法");
                    return  this.perid+"-"+this.pername;
                }
           }
           var per1=new Person(1001,"zhangsan");
           //alert(typeof per1); //object
           alert(per1.perid+","+per1.pername);
           //var msg=per1.getPerInfo();
           //alert(msg);
        </script>
    </head>
    <body>
        
    </body>
</html>

在JavaScript中，this通常指向的是我们正在执行的函数本身，或者是指向该函数所属的对象（运行时）

一旦您有了对象构造器，就可以创建新的对象实例，就像这样：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
           var per2=new Person(1002,"lisi");
           //alert(typeof per2); //object
           alert(per2.perid+","+per2.pername);
           //var msg=per2.getPerInfo();
           //alert(msg);
        </script>
    </head>
    <body>
        
    </body>
</html>

JavaScript for...in 循环

JavaScript for...in 语句循环遍历对象的属性。

语法

for (variable in object){

执行的代码……

}

JavaScript 的对象是可变的

对象是可变的，它们是通过引用来传递的。

以下实例的 person 对象不会创建副本：

var x = person;  // 不会创建 person 的副本，是引用

如果修改 x ，person 的属性也会改变

new 和不 new的区别：

如果 new 了函数内的 this 会指向当前这个 person 并且就算函数内部不 return 也会返回一个

对象

如果不 new 的话函数内的 this 指向的是 window

2.2JavaScript Number 对象

JavaScript 只有一种数字类型。可以使用也可以不使用小数点来书写数字

封装关于数字操作的对象

通过字面量的方式创建对象 -- 字面量=变量

变量就是对象，数据类型为number

通过构造函数方式创建对象-- 数据类型为object

JavaScript 数字

JavaScript 数字可以使用也可以不使用小数点来书写：

var pi=3.14;    // 使用小数点
var x=34;       // 不使用小数点

极大或极小的数字可通过科学（指数）计数法来写：

var y=123e5;    // 12300000
var z=123e-5;   // 0.00123

所有 JavaScript 数字均为 64 位

JavaScript 不是类型语言。与许多其他编程语言不同，JavaScript 不定义不同类型的数字，比如整

数、短整数、长整数、浮点等等

在JavaScript中，数字不分为整数类型和浮点型类型，所有的数字都是由浮点型类型

采用 IEEE754 标准定义的 64 位浮点格式表示数字，它能表示最大值（Number.MAX_VALUE）

为 ±1.7976931348623157e+308，最小值（Number.MIN_VALUE）为 ±5e-324

此格式用 64 位存储数值，其中 0 到 51 存储数字（片段），52 到 62 存储指数，63 位存储符号

值 (aka Fraction/Mantissa)

指数（Exponent）

符号（Sign）

52 bits (0 - 51) 

11 bits (52 - 62)

1 bit (63)

 

精度

整数（不使用小数点或指数计数法）最多为 15 位

var x = 999999999999999; // x 为 999999999999999

var y = 9999999999999999; // y 为 10000000000000000

小数的最大位数是 17，但是浮点运算并不总是 100% 准确：

var x = 0.2+0.1; // 输出结果为 0.30000000000000004

八进制和十六进制

如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 "x"，则解释为十六

进制。

var y = 0377;
var z = 0xFF;

绝不要在数字前面写零，除非您需要进行八进制转换

默认情况下，JavaScript 数字为十进制显示

但是你可以使用 toString() 方法 输出16进制、8进制、2进制

var myNumber=128;
myNumber.toString(16);   // 返回 80
myNumber.toString(8);    // 返回 200
myNumber.toString(2);    // 返回 10000000

无穷大（Infinity）

当数字运算结果超过了JavaScript所能表示的数字上限（溢出），结果为一个特殊的无穷大

（infinity）值，在JavaScript中以Infinity表示。同样地，当负数的值超过了JavaScript所能表示的负

数范围，结果为负无穷大，在JavaScript中以-Infinity表示。无穷大值的行为特性和我们所期望的是

一致的：基于它们的加、减、乘和除运算结果还是无穷大（当然还保留它们的正负号）

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            var myNumber=3;
            while(myNumber!=Infinity){
                myNumber=myNumber*myNumber
                document.write("<h4>"+myNumber+"</h4>")
            }
        </script>
    </head>
    <body>
    </body>
</html>

除以0也产生了无限:

var x = 2/0;
var y = -2/0;

NaN - 非数字值

NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置

为该值，来指示其不是数字值

你可以使用 isNaN() 全局函数来判断一个值是否是 NaN 值

var x = 1000 / "Apple";
isNaN(x); // 返回 true
var y = 100 / "1000";
isNaN(y); // 返回 false

除以0是无穷大，无穷大是一个数字:

var x = 1000 / 0;
isNaN(x); // 返回 false

数字可以是数字或者对象

数字可以私有数据进行初始化，就像 x = 123;

JavaScript 数字对象初始化数据， var y = new Number(123);

var x = 123;
var y = new Number(123);
typeof(x) // 返回 Number
typeof(y) // 返回 Object

实例

var x = 123;             
var y = new Number(123);
(x === y) // 为 false，因为 x 是一个数字，y 是一个对象

Number 属性

属性

描述

Number.MAX_VALUE

最大值

Number.MIN_VALUE

最小值

Number.NaN

非数字

Number.NEGATIVE_INFINITY

负无穷，在溢出时返回

Number.POSITIVE_INFINITY

正无穷，在溢出时返回

Number.EPSILON

表示 1 和比最接近 1 且大于 1 的最小 Number 之间的差别

Number.MIN_SAFE_INTEGER

最小安全整数。

Number.MAX_SAFE_INTEGER

最大安全整数。

数字方法

方法

描述

Number.parseFloat()

将字符串转换成浮点数，和全局方法 parseFloat() 作用一致。

Number.parseInt()

将字符串转换成整型数字，和全局方法 parseInt() 作用一致。

Number.isFinite()

判断传递的参数是否为有限数字。

Number.isInteger()

判断传递的参数是否为整数。

Number.isNaN()

判断传递的参数是否为 isNaN()。

Number.isSafeInteger()

判断传递的参数是否为安全整数。

airar
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js函数调用时括号分析
weixin_44164982的博客
08-14 906
1.函数调用时多个括号情况分析 2.JavaScript 函数调用时带括号和不带括号的区别
js-匿名函数-特殊符号!-括号表达式-闭包
最新发布
插件开发
06-27 598
时，alert(‘aaa’)会被认为是函数表达式，中间部分被认为是函数参数，而实际上alert(‘aaa’)返回的是undefine，所以会报错。匿名函数，也称为拉姆达函数，是一种使用 JavaScript 函数的强大方式。 即使 JavaScript 中没有正式的私有对象属性的概念，但可以使用闭包来实现公有方法，而通过公有方法可以访问在包含作用域中定义的变量。如下代码，（1，2，3）会被解析为函数的实参，（1，2，3）前面的()表达式会被解析为函数表达式。第二种创建函数的方式是使用函数表达式。
js中小括号()的用法详解
江天寒月的博客
08-25 5016
一、js中小括号()的用法详解 1、作为分组运算符: 分组运算符应该是再熟悉不过了，因为在小学数学中就有应用，例如: var a=(1+2)*4; console.log(a); 以上代码的输出值是12，因为分组运算符可以改变运算符的优先级，否则的话输出值是9。 扩展说明: 1.很多教程说它是一个强制运算符，其实在ECMAScript中，根本就没有强制运算符这么一个概念，它就是普通分组运算符。 2...
Javascript 括号表达式
懒猫慵阳的博客
05-13 1509
Javascript括号表达式 括号表达式，里面有多想，只执行最后一项 function fn1 () {console.log(1)} function fn2 () {console.log(2)} //匿名函数自执行 ;(fn1,fn2) () //2 “` ...
day10_JavaScript高级1
08-08
JavaScript 高级课程主要涵盖了BOM（Browser Object Model）和DOM（Document Object Model）对象，以及如何使用它们来实现特定的交互效果。DOM是HTML和XML文档的编程接口，允许JavaScript与网页内容进行交互，包括...
javascript高级程序设计
06-02
"JavaScript高级程序设计"是一本深入探讨JavaScript编程语言的书籍，旨在帮助读者掌握JS的各个方面，适合自学者进行系统学习。以下是对书中的主要知识点的详细阐述： 1. JavaScript简介： JavaScript是一种广泛...
高级JavaScript
02-14
**高级JavaScript** JavaScript，一种广泛应用于网页和网络应用的脚本语言，是互联网上实现动态交互的核心技术之一。随着Web开发的不断进步，JavaScript已经从简单的页面特效扩展到了构建复杂应用的工具，尤其是在...
javascript高级教程.pdf
05-26
《JavaScript高级教程》这本书深入探讨了这一动态语言的核心概念和技术，旨在帮助开发者提升技能，掌握JavaScript的高级用法。 首先，JavaScript是一种解释型的、基于原型的、动态类型的脚本语言。这意味着它不需要...
JavaScript高级
05-22
"JavaScript高级"这一主题深入探讨了这门语言的核心概念、高级特性以及最佳实践，旨在帮助那些已经掌握JavaScript基础的开发者进一步提升技能水平。下面将详细阐述JavaScript高级知识中的多个重要方面。 1. **原型...
带括号的四则运算表达式js实现
04-29
输入一个字符串形式的四则运算表达式，如"1.0+2.1*(3+4)" 直接谈出结果，输入在文件底部，自己写的。思路是先把中缀表达式转成后缀表达式，然后根据后缀表达式建立一个栈求出结果
JS表达式(概述,基本表达式,复杂表达式)
qq_45585640的博客
03-17 3447
JS表达式(概述,基本表达式,复杂表达式)
JavaScript中的函数自调用
qq_47455650的博客
06-06 6944
结果： 结果：function定义部分的括号不可省，不能写成function(){}()这种格式。不然就会报错 自调用函数也可称之为”立即执行函数“，函数执行完函数空间就被释放，不能再被访问，但函数返回值可以被保存。故这种调用方法多是针对初始化功能的函数，即函数只执行一次的情况。 结果：函数自调用执行之后（打印出字符串hello），报错fn is not defined 上例验证了，被立即执行的函数，其函数名称就会自动被忽略，均不能再通过函数名再次被调用。所以，在写立即执行函数时就没有必要写函数名称。 (4
javascript中的括号()用法小结
玩笑过后
06-20 5081
转载地址：https://www.jb51.net/article/48985.htm()作为一个数学运算中的基本符号，在计算机程序中也被大量使用，最基本的就是提高运算优先级,JS中也不例外1.提高优先级(1+2)*3 与数学运算中保持一致，先计算1+2再乘以3得出9同时也可以是其他表达式,如:复制代码代码如下:(a+(function(i){return i}(2)))*c2.函数的参数要放在括...
JS中表达式的理解
sdfujichao的博客
08-04 4686
转载出处： 作者：郑航 链接：http://www.zhihu.com/question/39420977/answer/81250170 来源：知乎 著作权归作者所有，转载请联系作者获得授权。 表达式：是由运算元和运算符(可选)构成，并产生运算结果的语法结构。 以下在ES5中被称为基本表达式（Primary Expression） this、null、argum
javascript小括号表达式
weixin_30861459的博客
07-27 110
javascript的小括号“()”表达式可以帮助我们把javascript语句组合分块并且每对小括号都会返回一个值且在同一语句中具有优先执行权。例如： 1 2 3 4 var result, result2; result = 5 * (2 + 3); //这是一个表达式，分别进行了加法和乘法的运算，结果是25。 alert(result2); ...
JavaScript中的小括号()用法总结
佳佳的博客
10-23 7119
JavaScript中的小括号()用法总结1. 提高优先级(1+2)*3 表达式中，()使得其优先级与数学运算中一致，先计算1+2再乘以3得出9。2. 函数参数函数的定义和调用时，函数的形参和实参都要放在小括号中。//函数定义 function fun(a,b,c) { //… } //函数调用 fun(1,2,3);3. 立即执行函数表达式如下代码，（1，2，3）会被解析为函数的实参，（1
javaScript知识点和实例
fallsTheDust的博客
02-21 2724
javaScript知识点和实例 一、最终显示效果：点击红色按钮，会有视屏弹出 并带有遮罩层 点击黄色区域可以关闭视频 并回到最初的状态。 页面主要代码：main中主要包含一个a，控制显示的按钮。设置有id值。 <div class="main"> <a href="javascript:;" class="video" id="video"></a> </div> 以下代码就是用来控制视频的显示效果，.video-btn 包含了视频显示区域以及
JavaScript基础知识（一）
weixin_30340617的博客
08-17 210
一、JavaScript基础 1、JavaScript用法： HTML 中的脚本必须位于 <script> 与 </script> 标签之间。 脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。 HTML引入外部js文件方法示例： <!DOCTYPE html> <html>...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值