JavaScriptDay2

4.函数

4.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(-10) //10

参数问题：JavaScript可以传任意个参数，也可以不传递参数~

参数进来是否存在的问题？

假设不存在参数，如何规避？

arguments

arguments是一个JavaScript免费赠送的关键字代表传递进来的所有参水，是一个数组！

注意：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有的参数~

rest

ES6引入的新特性，获取除了已经定义的参数之外的所有参数

rest参数只能写在最后面，必须用...标识

4.2、变量的作用域

在JavaScript中，var定义变量实际是有作用域的。

假设在函数体中声明，则在函数体外不可以使用~

如果在函数外非要使用的话，后面可以研究一下闭包（比较难）

function qj(){
    var x = 1;
    x = x + 1;
}

x = x + 2;//Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

function qj(){
    var x = 1;
    x = x + 1;
}

function qj2(){
    var x = 'a';
    x = x + 1;
}

内部函数可以访问外部函数的成员，反之则不行

function qj() {
    var x = 1;
    function qj2(){
        var y = x + 1;
        console.log(y);
    }
    qj2();
}
qj()
var z = y + 1; //Uncaught ReferenceError: y is not defined

假设内部函数变量和外部函数的变量，重名！

function qj() {
    var x = 1;
    function qj2(){
        var x = 'A';
        console.log('inner'+x);
    }
    console.log('outer'+x);
    qj2();
}
qj()

输出：
outer1
innerA

假设在JavaScript中函数查找变量从自身函数开始~，由内向外查找。假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

提升变量的作用域

function qj() {
    var x = "x" + y;
    console.log(x);
    var y = 'y';
}
qj()

结果：xundefined

说明：JavaScript执行引擎，自动提升了y的声明，但是不会提升变量y的赋值；

function qj() {
    var y;
    var x = "x" + y;
    console.log(x);
    y = 'y';
}
qj()

这个是JavaScript在建立之初就存在的特性。养成规范：所有的变量定义都放在函数的头部，不要乱放便于代码维护；

function qj(){
    var x = 1,
        y = x + 1,
        z,i,a; //undefined
}

全局函数

//全局变量
var x = 1;
function f(){
    console.log(x);
}
f();
console.log(x);

输出：
1
1

全局对象window

var x = 'xxx';
alert(x);
alert(window.x);//默认所有的全局变量都会自动绑定在window对象上

alert()这个函数本身也是一个window变量

var x = 'xxx';
window.alert(x);
var old_alert = window.alert;
old_alert(x);
window.alert = function (){

};
//发现alert()失效了
window.alert(123);

//恢复
window.alert = old_alert;
window.alert(456);

JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错RefrenceError

规范

由于我们所有的全局变量都会绑定到我们的window上。如果不同的JavaScript文件，使用了相同的全局变量，会发生冲突-->如何减少冲突？

//唯一全局变量
var KuangApp = {};

//定义全局变量
KuangAPP.name = 'kuangshen';
KuangAPP.add = function(a,b){
    return a + b;
}

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题

局部作用域 let

function a(){
    for (var i = 0; i < 100; i++) {
        console.log(i);
    }
    console.log(i + 1); //问题： 结果输出了101 i出了作用域还有效
}
a();

ES6 let关键字，解决局部作用域冲突问题！

function a(){
    for (let i = 0; i < 100; i++) {
        console.log(i);
    }
    console.log(i + 1); //Uncaught ReferenceError: i is not defined
}
a();

建议使用let去定义局部作用域的变量

常量const

在ES6之前没有const关键词如何定义常量呢？

只有用全部大写字母命名的变量就是常量，建议不要修改这样的值

在ES6引入了常量关键字const

4.3、方法

定义方法

方法就是把函数放在对象的里面，对象只有两个东西：属性和方法

var yaning = {
    name:'孙亚宁',
    birth:2002,
    age: function (){
        var now = new Date().getFullYear();
        return now - this.birth;
    }
}
//属性
yaning.name
//方法，一定要带()
yaning.age()

this代表什么？拆开上面的代码看看

function getAge(){
    var now = new Date().getFullYear();
    return now - this.birth;
}

var yaning = {
    name:'孙亚宁',
    birth:2002,
    age: getAge

this是无法指向的，是默认指向调用它的那个对象

apply

在JavaScript中可以控制this的指向！

function getAge(){
    var now = new Date().getFullYear();
    return now - this.birth;
}

var yaning = {
    name:'孙亚宁',
    birth:2002,
    age: getAge

}
getAge.apply(yaning,[]);// this 指向了yaning，参数为空

5.内部对象

标准对象

typeof 123
'number'
typeof '123'
'string'
typeof true
'boolean'
typeof NaN
'number'
typeof []
'object'
typeof {}
'object'
typeof Math.abs
'function'
typeof undefined
'undefined'

5.1、Date

基本使用

var now = new Date();//Tue Oct 14 2025 09:00:27 GMT+0800 (中国标准时间)
now.getFullYear();//年
now.getMonth();//月 0~11
now.getDate();//日
now.getDay();//周几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime(); //时间戳 全世界统一 1970 1.1 0：00：00 到现在的毫秒数
console.log(new Date(1760403627718));//时间戳转时间

转换

5.2、JSON

JSON是什么

早期，所有数据传输习惯使用XML文件！

JSON是一种轻量级的数据交换格式
简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在JavaScript中一切为对象，任何JavaScript支持的类型都可以用JSON来表示；number，string...

格式：

对象都用{}
数组都用[]
所有的键值对都是用key：value

JSON字符串和JavaScript对象的转化：

var user = {
    name: "sunyaning",
    age: 23,
    sex: '男'
}

//对象转化为json字符串 {"name":"sunyaning","age":23,"sex":"男"}
var jsonUser = JSON.stringify(user);

//json字符串转化为对象 参数为json字符串
var obj = JSON.parse('{"name":"sunyaning","age":23,"sex":"男"}');

很多人搞不清JSON和JavaScript对象的区别

var obj = {a: 'hello',b:'nihao'};
var json = '{"a":"hello","b":"nihao"}';

6.面向对象编程

原型对象

JavaScript、Java、C#... 面向对象； JavaScript有些区别！

类：模板

对象：具体的实例

在JavaScript中需要换一下思维方式理解

原型继承：

var Student = {
    name: "sunyaning",
    age: 23,
    run: function (){
        console.log(this.name + "run....");
    }
}

var xiaoming = {
    name: "xiaoming"
};

//xiaoming的原型是 Student
xiaoming.__proto__ = Student;

class继承

class关键字实在ES6引入的

定义一个类，属性，方法

//定义一个学生的类
class Student{
    constructor(name) {
        this.name = name;
    }

    hello(){
        alert('hello')
    }
}
var xiaoming = new Student("xiaoming");

继承

//定义一个学生的类
class Student{
    constructor(name) {
        this.name = name;
    }

    hello(){
        alert('hello')
    }
}

class pupil extends Student{
    constructor(name,grade) {
        super(name);
        this.grade = grade;
    }

    myGarde(){
        alert("我是一名小学生");
    }

}
var xiaoming = new pupil("xiaoming",1);

本质：查看对象原型

原型链

https://cloud.tencent.com/developer/article/1751523

所有引用类型（函数，数组，对象）都拥有__proto__属性（隐式原型)
所有函数除了有_proto_属性之外还拥有prototype属性（显式原型）
原型对象：每创建一个函数，该函数会自动带有一个prototype属性，该属性是一个指针，指向了一个对象，我们称之为原型对象

posted @ 2025-10-14 16:19 齐天大圣951 阅读(9) 评论(0) 收藏举报

刷新页面返回顶部

Sunyn-blogs