JavaScript 学习(简单入个门, 个人笔记)基础的那种哦!!! 中篇

JavaScript 学习贼基础的那种哦!!! 中篇

4 函数

4.1

方法: 对象(属性, 方法)

函数:

举例子 java

//java
public 返回值类型 方法名() {

}

定义方式一

绝对值函数

<script>
        'use strict';

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

一旦执行到 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 可以传递任意参数, 也可以不传递参数!

参数进来是否存在的问题? 假设不存在参数, 如何规避?

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

arguments

arguments 是JS免费赠送的关键字;
代表, 传递进来的所有参数, 是一个数组~

let abs = function (x) {
            console.log("x=>"+x);
            for (let i = 0; i < arguments.length; i++) {
                console.log(arguments[i]);
            }
        }

问题: arguments 包括所有的参数, 我们有时候想使用多余的参数来进行附加操作. 排除已有的参数

rest

以前:

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

现在:

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

ES6 引入的新特性, 获取除了已经定义

rest参数只能写最后面, 必须用 … 标识

4.2 变量的作用域

在javascript中, var定义变量实际是有作用域的.
假设在函数体中声明, 则在函数体外不可以使用~( 非要实现的话, 后面可以研究一下 闭包)

<script>
        'use strict'
        function qj() {
            let x = 1;
            x = x + 1;
        }

        x = x + 2; //注意变量的作用域
    </script>

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

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

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

function qj() {
            let x = 1;

            //内部函数可以访问外部函数的成员, 反之则不行~
            function qj2() {
                let y = x + 1;
            }

            let z = y + 1; //y已经被销毁了吧
        }

假设, 内部函数变量和外部函数的变量, 重名!

function qj() {
            let x = 1;
            function qj2() {
                let x = 'A';
                console.log('inner' + x); //outer1
            }
            console.log('outer' + x); //innerA
            qj2();
        }

        qj();

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

提升变量的作用域

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

结果: xundefined
说明; js执行引擎, 自动提升了y的声明, 但是不会提升变量y的赋值;

function qj2() {
            let y;
            
            let x = "x" + y;
            console.log(x);
            y = 'y';
        }

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

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

全局函数

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

全局对象 window

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

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

let x = 'xxx';
        window.alert(x);
        let old_alert = window.alert;
        //old_alert(x);

        window.alert = function () {

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

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

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

规范

由于我们所有的全局变量都会绑定到我们的window上. 如果不同的js文件, 使用了相同的全局变量, 冲突~ > 如果能减少冲突?

// 唯一全局变量
        let weifc = {};

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

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

局部作用域 let

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

ES6 let 关键字, 解决作用域冲突问题

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

建议使用 let,

常量 const

在ES6 之前, 怎么定义变量: 只有用全部大写字母命名的变量就是常量; 建议不要修改这样的值?

var PI = '3.14';
        PI = '213'; //可以改变这个值
        console.log(PI);

在ES6 引入常量关键字 const

4.3 方法

定义方法

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

let weifc = {
            name: 'weifc',
            bitrh: 2001,
            // 方法
            age: function () {
                // 今年 - 出生的年
                let now = new Date().getFullYear();
                return now - this.bitrh;
            }
        }

调方法一定义用 ();

this.代表什么?
踩开上面的代码看看

function getAge() {
            let now = new Date().getFullYear();
            return now - this.bitrh;
        }
        var weifc = {
            name: 'weifc',
            bitrh: 2001,
            age: getAge
        }

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

apply

在js 中可以控制 this 的指向!

function getAge() {
            var now = new Date().getFullYear();
            return now - this.bitrh;
        }
        var weifc = {
            name: 'weifc',
            bitrh: 2001,
            age: getAge()
        }

        var xiaoming = {
            name: '小明',
            bitrh: 2000,
            age: getAge()
        }

        //getAge.apply(xiaoming, []); // this, 指向了 xiaoming, 参数为空
        //getAge.apply(weifc, []); // this, 指向了 weifc, 参数为空
       

报错

5.对象

标准对象

5.1 Date

基本使用

let now = new Date(); //Thu Dec 10 2020 11:29:32 GMT+0800 (中国标准时间)
        now.getFullYear(); //年 2020
        now.getMonth(); //月 0 ~ 11
        now.getDate(); //日
        now.getDay(); //星期几
        now.getHours(); //时
        now.getMinutes(); //分
        now.getSeconds(); //秒

        now.getTime(); //时间戳

        console.log(new Date(111111111111)); //通过时间戳, 获取时间

转换

JSON

json 是什么 百度即可

早期, 所有数据传输习惯了XML文件!

在JavaScript 一切皆为对象, 任何 Js 支持的类型都可以用 JSon 来表示; number, string …
格式:

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

JSON字符串 和 JS对象的转换

var user = {
            name: "weifc",
            age: 3,
            sex: '男'
        }

        //对象转化为 json 字符串
        var jsonUser = JSON.stringify(user);

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

很多人搞不清楚, JSON 和 JS 对象的区别

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

5.3 Ajax

原生的 JS 写法, xhr 异步请求

JQuey 封装好的方法 $("#name").ajax("")

axios 请求

6面向对象编程

6.1 什么是面向对象
javascript : java : C++ … 面向对象; 但是 javascript 有一些区别!

类: 模板

对象: 具体的示例

在 javaScript 这个需要大家换一下思维方式!

原型: 模板(这个很重要)

<script>
        var Student = {
            name: "weifc",
            age: 3,
            run: function () {
                console.log(this.name + " run ...");
            }
        };

        var xiaoming = {
            name: "xiaoming"
        };

        //原型对象
        xiaoming.__proto__ = Student;

        var Bird = {
            fly: function () {
                console.log(this.name + " fly...");
            }
        }

        // 小明的原型是 Bird
        xiaoming.__proto__ = Bird;

    </script>

class 继承

class 关键字, 是在 ES6 引入的
1.定义一个类, 属性, 方法
以前

function Student(name) {
            this.name = name;
        }

        //给student 新增一个方法
        Student.prototype.hello = function () {
            alert('hello');
        }

现在

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

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

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

2. 继承

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

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

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

            mgGrade() {
                alert('我是一名小学生');
            }
        }

        var xiaoming = new Student("xiaoming");
        var xiaohong = new xiaoStudent("xiaohong", 10);

本质: 查看对象原型

原型链
proto

操作BOM 对象 (重第)

浏览器介绍

JavaScript 和 浏览器关系?
JavaScript 诞生就是为了能够让它在浏览器中运行!
BOM: 浏览器对象模拟器
IE 6~ 11
Chrome
Safari
FireFox
Opera

BOM: 浏览器对象模型

第三方
QQ浏览器
360 浏览器

window

window 代表浏览器窗口

window.alert(1);
undefined
window.innerHeight;
350
window.innerWidth;
892
window.outerWidth;
907
//可以适当调整浏览器端口, 试试

Navigator

Navigator , 封装了浏览器的信息

navigator.appVersion
“5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.66 Safari/537.36”
navigator.appName;
“Netscape”
navigator.userAgent
“Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.66 Safari/537.36”

大多数时候, 我们不会使用 navigator 对象, 因为会被人为修改 !
不建议使用这些属性来判断和编写代码

screen

代表屏幕

screen.width;
1536 px
screen.height;
864 px

location (重要)

location 代表当前页面的URL信息

hash: ""
host: "localhost:63342"
hostname: "localhost"
href: "http://localhost:63342/JavaScript_tests/lesson02/8.class%E7%BB%A7%E6%89%BF.html?_ijt=2igu1rniiudbqmdebmvs43f2fn"
origin: "http://localhost:63342"
pathname: "/JavaScript_tests/lesson02/8.class%E7%BB%A7%E6%89%BF.html"
port: "63342"
protocol: "http:"
reload:f reload() // 刷新网页
// 设置新的地址
location.assign('https://blog.kuangstudy.com/')

document

document 代表当前的页面, HTML DOM文档树

document.title
"百度一下，你就知道"
document.title="weifc";
"weifc"

获取具体的文档树节点

<dl id="">
        <dt>java</dt>
        <dd>javase</dd>
        <dd>javaee</dd>
    </dl>

    <script>
        var dl = document.getElementById('app');
    </script>

获取 cookie

劫持 cookie 原理
www.taobao.com

<script scr="aa.js"></script>
//恶意人员; 获取你的 cookie 上传到他的服务器

服务器端可以设置 cookie: httpOnly

history

history.back(); //后退
undefined
history.forward(); //前进
undefined