JavaScript学习——函数、变量作用域、方法、内部对象（Date、JSON数据交换格式）、面向对象编程

最新推荐文章于 2022-09-21 19:42:12 发布

上兵伐眸

最新推荐文章于 2022-09-21 19:42:12 发布

阅读量577

点赞数

分类专栏：前端基础知识文章标签： javascript 学习开发语言

本文链接：https://blog.csdn.net/weixin_44153521/article/details/123324706

版权

前端基础知识专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、函数

函数定义

方式一

function abs(x) { 
    if (x >= 0) { 
        return x; 
    } 
    else { 
        return -x; 
    } 
}

一旦执行到 return 时，函数就执行完毕，并将结果返回。

如果没有 return 语句，函数执行完毕后也会返回结果，只是结果为 undefined 。

方式二

var abs = function (x) { 
    if (x >= 0) { 
        return x; 
    } 
    else { 
        return -x; 
    } 
};

在这种方式下， function (x) { ... } 是一个匿名函数，它没有函数名。但是这个匿名函数赋值

给了变量 abs ，所以，通过变量 abs 就可以调用该函数。（注意：第二种方式按照完整语法需要在函数体末尾加一个 ; ）

函数调用

abs(10); // 返回10 
abs(-9); // 返回9
abs(10, 'blablabla'); // 返回10 
abs(-9, 'haha', 'hehe', null); // 返回9
abs(); // 返回NaN

//此时 abs(x) 函数的参数 x 将收到 undefined ，计算结果为 NaN 。
//要避免收到 undefined ，可以对参数进行检查：
function abs(x) { 
    if (typeof x !== 'number') { 
        throw 'Not a number'; 
    }
    ........
}

函数参数

JavaScript还有一个免费赠送的关键字 arguments ，它只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数。

利用 arguments ，你可以获得调用者传入的所有参数。也就是说，即使函数不定义任何参数，还是可以拿到参数的值：

function abs() { 
    if (arguments.length === 0) { 
        return 0;
    }
    var x = arguments[0];
    return x >= 0 ? x : -x; 
}
abs(); // 0 
abs(10); // 10 
abs(-9); // 9

arguments 最常用于判断传入参数的个数

// foo(a[, b], c) 
// 接收2~3个参数，b是可选参数，如果只传2个参数，b默认为null： 
function foo(a, b, c) { 
    if (arguments.length === 2) { 
        // 实际拿到的参数是a和b，c为undefined 

        c = b;     // 把b赋给c 
        b = null;     // b变为默认值 
    }
    // ...
}

rest

用于获取除了a,b以外输入的参数

rest必须放最后，用...标识

2、变量作用域

在JavaScript中，用 var 申明的变量实际上是有作用域的。

如果一个变量在函数体内部申明，则该变量的作用域为整个函数体，在函数体外不可引用该变量：

use strict'; 
function foo() { 
    var x = 1; 
    x = x + 1; 
}
x = x + 2;     // ReferenceError! 无法在函数体外引用变量x

如果两个不同的函数各自申明了同一个变量，那么该变量只在各自的函数体内起作用。换句话说，不同函数内部的同名变量互相独立，互不影响：

由于 JavaScript 的函数可以嵌套，此时，内部函数可以访问外部函数定义的变量，反过来则不行：

'use strict'; 
function foo() { 
    var x = 1; 
    function bar() { 
        var y = x + 1; // bar可以访问foo的变量x! 
    }
    var z = y + 1; // ReferenceError! foo不可以访问bar的变量y! 
}

如果内部函数和外部函数的变量名重名怎么办？

function foo() { 
    var x = 1; 
    function bar() { 
        var x = 'A'; 
        console.log('x in bar() = ' + x); // 'A' 
    }
    console.log('x in foo() = ' + x); // 1
    bar(); 
}
foo();

变量提升

全局作用域

不在任何函数内定义的变量就具有全局作用域。实际上，JavaScript默认有一个全局对象 window ，全局作用域的变量实际上被绑定到 window 的一个属性：

'use strict'; 
var course = 'Learn JavaScript'; 
alert(course); // 'Learn JavaScript' 
alert(window.course); // 'Learn JavaScript

因此，直接访问全局变量 course 和访问 window.course 是完全一样的。

因此，顶层函数的定义也被视为一个全局变量，并绑定到 window 对象：

use strict'; 
function foo() { 
    alert('foo'); 
} 
foo(); // 直接调用
foo() window.foo(); // 通过window.foo()调用

alert() 函数其实也是 window 的一个变量：

'use strict'; 
window.alert('调用window.alert()'); // 把alert保存到另一个变量: 
var old_alert = window.alert; 
// 给alert赋一个新函数: 
window.alert = function () {
} 
alert('无法用alert()显示了!'); 
// 恢复alert: 
window.alert = old_alert; 
alert('又可以用alert()了!');

JavaScript实际上只有一个全局作用域。任何变量（函数也视为变量），如果没有在当前函数作用

域中找到，就会继续往上查找，最后如果在全局作用域中也没有找到，则报 ReferenceError 错误。

全局变量会绑定到 window 上，不同的JavaScript文件如果使用了相同的全局变量，或者定义了相同名

字的顶层函数，都会造成命名冲突，并且很难被发现。减少冲突的一个方法是把自己的所有变量和函数

全部绑定到一个全局变量中。例如：

// 唯一的全局变量MYAPP:
var MYAPP = {}; 
// 其他变量: 
MYAPP.name = 'myapp'; 
MYAPP.version = 1.0; 
// 其他函数: 
MYAPP.foo = function () { return 'foo'; };

局部作用域

'use strict'; 
function foo() { 
    for (var i=0; i<100; i++) { 
        console.log(i);
    }
    i += 100; // 仍然可以引用变量i 
    console.log(i);
}

为了解决块级作用域，ES6引入了新的关键字 let ，用 let 替代 var 可以申明一个块级作用域

的变量：

'use strict'; 
function foo() { 
    var sum = 0; 
    for (let i=0; i<100; i++) { 
        sum += i; 
    }
    // SyntaxError:
     i += 1; 
}

常量

我们通常用全部大写的变量来表示“ 这是一个常量，不要修改它的值 ” ：

var PI = 3.14;

ES6标准引入了新的关键字 const 来定义常量， const 与 let 都具有块级作用域：

'use strict'; 
const PI = 3.14; 
PI = 3; 
// 某些浏览器不报错，但是无效果！ 
PI; 
// 3.14

3、方法

var person = {
            name : "zhangsan",
            brith: 1997,
            age:function () {
                return new Date().getFullYear()-this.brith;
                }
}

person.age//表示调用age属性
person.age()//表示调用age方法

        function getAge() {
            return (new Date().getFullYear()-this.brith);
        }

        var person = {
            name : "zhangsan",
            brith: 1997,
            age:getAge
        }
        person.age()//ok
        getAge()//NAN

在一个方法内部， this 是一个特殊变量，它始终指向当前对象

apply

js中可以apply可以控制 this 的指向

getAge().apply(person,[])   //方法getAge指向了person对象，参数为空

4、内部对象

typeof xxx判断对象类型

Date

        var now = new Date();
        now.getFullYear();//年
        now.getMonth();//月
        now.getDate();//日
        now.getDay();//星期
        now.getHours();//时
        now.getMinutes();//分
        now.getSeconds();//秒
        
        now.getTime();  //时间戳，全世界同意，从1970年1月1日的毫秒数
        console.log(new Date("时间戳转时间"))

JSON

JSON(JavaScript Object Notation, JS 对象标记 ) 是一种轻量级的数据交换格式

在 JavaScript 语言中，一切都是对象。因此，任何 JavaScript 支持的类型都可以通过 JSON 来表示，例如字符串、数字、对象、数组等。看看他的要求和语法格式：

对象表示为键值对，数据由逗号分隔 key：value

花括号保存对象 {}

方括号保存数组 []

 var person = {
       name : "zhangsan",
       brith: 1997,
       age:25
     }
var json = JSON.stringify(person);     //js对象转json
var obj = JSON.parse('{"name":"zhangsan","brith":1997,"age":25}') //json解析为js对象

5、面向对象编程

java中

类：模板

对象：具体的实例

原型对象(原型链)

        var person = {
            name : "zhangsan",
            brith: 1997,
            age:function (){
                return new Date().getFullYear()-this.brith;
            }
        }
        var xiaoming = {
            name :  "xiaoming",
            brith: 2000
        }
        xiaoming.__proto__ = person; //xiaoming的原型是person

class继承

class关键字在ES6 开始正式被引入到 JavaScript 中

        class Person{
            constructor(name,age) {
                this.name = name;
                this.age = age;
            }
            hello(){
                alert("hello"+this.name+this.age)
            }
        }
        var s1 = new Person("张三",3)
        //s1.hello()


        class Student extends Person{
            constructor(name,age,sid) {
                super();
                this.name = name;
                this.age = age;
                this.sid = sid;
            }
            hello2(){

                alert("hello"+this.name+this.age+this.sid)
            }
        }
        var s2 = new Student("s1",1,20220101)
        s2.hello()
        s2.hello2()