JavaScript函数及面向对象

前端开发作者： 2024-08-26 04:20:01

函数及面向对象 1. 定义函数 1. 定义方式一绝对值函数 function abs(x){ if (x >= 0) return x; else return -x; } 一旦执行到

函数及面向对象

1. 定义方式一

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

2. 定义方式二

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

abs(10);

1. 参数问题

function abs(x){
    //手动抛出异常来判断
    if (typeof x !== 'number'){
        throw 'Not a Number'
    }
    if (x >= 0)
        return x;
    else
        return -x;
}

2. arguments

function abs(x){
    console.log('x => ' + x);
    
    for (var i = 0; i < arguments.length; i++){
        console.log(arguments[i]);
    }
    
    if (x >= 0)
        return x;
    else
        return -x;
}

3. rest

function aaa(a,b) {
    console.log("a=>" + a);
    console.log("b=>" + b);
    if (arguments.length > 2){
        for (var i = 2; i < arguments.length; i++) {
            var arg = arguments[i];
            console.log(arg);
        }
    }
}

function aaa(a,b,...rest) {
    console.log("a=>" + a);
    console.log("b=>" + b);
    console.log(rest);
}

1 . 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() {
        y = x + 1;
    }
    var z = y + 1;
}

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

2. 提升变量的作用域

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

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

function qj2 {
    var x = 1,y = x + 1;
        z,i;   //undefined
    
    //之后随意用
    
}

3. 全局函数

//全局变量
x = 1;

function f() {
    console.log(x);
}
f();
console.log(x);

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

4. 规范

//唯一全局变量
var WangApp = {};
//定义全局变量
WangApp.name = 'Wang';
WangApp.add = function (a,b) {
    return a + b;
}

5. 局部作用域let

function add() {
    for (var i = 0; i < 100; i++) {
        console.log(i);
    }
    console.log(i + 1);     //问题：i 出了这个作用域还可以使用？
}

function add() {
    for (let i = 0; i < 100; i++) {
        console.log(i);
    }
    console.log(i + 1);     //问题：i 出了这个作用域还可以使用？
}

6 .常量const

var PI = '3.14';		//如果不按照约定，可以改变这个值

const PI = '3.14';		//只读变量，后面修改会报错

1. 定义方法

var wang = {
    name: 'Wang',birth: 2000,//方法
    age: function (){
        //今年 - 出生的年
        var now = new Date().getFullYear();     //变量补全 Ctrl alt V
        return now - this.birth;
    }
}
//属性
wang.name
//方法,一定要带()
wang.age()

2. this.代表什么？

function getAge() {
    //今年 - 出生的年
    var now = new Date().getFullYear();     //变量补全 Ctrl alt V
    return now - this.birth;
}
var wang = {
    name: 'Wang',//方法
    age: getAge
}
//wang.age() ok
//getAge() NaN 此时getAge()指向window对象（全局）

3. apply

function getAge() {
    //今年 - 出生的年
    var now = new Date().getFullYear();     //变量补全 Ctrl alt V
    return now - this.birth;
}
var wang = {
    name: 'Wang',//方法
    age: getAge
}
//wang.age() ok
//getAge() NaN 此时getAge()指向window对象（全局）
getAge.apply(wang,[]);   //this 指向了wang这个对象，参数为空

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

1. Date

1. 基本使用

var date = new Date();
date.getFullYear(); //年
date.getMonth();    //月 0~11    代表月
date.getDate();     //日
date.getDay();      //星期几
date.getHours();    //时
date.getMinutes();  //分
date.getSeconds();  //秒
date.getTime();     //时间戳   全世界统一   1970 1.1 0:00:00 毫秒数
console.log(new Date(1596607471140));    //时间戳转为时间

2. 转换

date = new Date(1596607471140)
//Wed Aug 05 2020 14:04:31 GMT+0800 (中国标准时间)
date.toLocaleString();  //以字符串的形式返回本地时间，注意，调用是一个方式，不是一个属性！
//"2020/8/5 下午2:04:31"
date.toGMTString();     //以字符串的形式返回GMT时间
//"Wed,05 Aug 2020 06:04:31 GMT"

2. JSON

1. JSON是什么

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

2.格式

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

3. JSON字符串和JS对象的转化

var user = {
    name: "wang",age: 3,sex: "男"
}
//对象转化为JSON字符串
var jsonUser = JSON.stringify(user);
//JSON字符串转换为对象 参数为JSON字符串
var obj = JSON.parse('{"name":"wang","age":3,"sex":"男"}');

4. JSON和JS对象的区别

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

3. Ajax

原生的JS写法 xhr 异步请求
jQuery 封装好的方法 $("#name").ajax(''')
axios 请求

1. 什么是面向对象

2. 原型对象

var Student = {
    name: "wang",run: function () {
        console.log(this.name + " r
    }
};
var xiaoming = {
    name: "xiaoming"
};
var Bird = {
    fly: function () {
        console.log(this.name + " f
    }
}
//小明的原型是Student
xiaoming.__proto__ = Student;

3. class继承

1. 定义一个类

//定义一个学生的类
class Student{
    //构造器
    constructor(name) {
        this.name = name;
    }
    hello() {
        alert('hello');
    }
}

var xiaoming = new Student("xiaoming");
var xiaohong = new Student("xiaohong");
xiaoming.hello();

2. 继承

class Student{
    //构造器
    constructor(name) {
        this.name = name;
    }
    hello() {
        alert('hello');
    }
}
class Pupil extends Student{
    constructor(name,grade) {
        super(name);
        this.grade = grade;
    }
    myGrade() {
        alert("我是一名小学生");
    }
}
var xiaoming = new Student("xiaoming");
var xiaohong = new Pupil("xiaohong",1);