前端基础——JavaScript部分（二）函数，对象，面向对象编程

函数

定义函数

定义方式一

绝对值函数

function abs(x){
if(x>=0){
return x;  //注意js会自动在每行结尾加； 不要换行写
}else{
return -x;
}
}

一旦执行到return代表函数结束，返回结果！！
如果没有执行return，函数执行完也会返回结果，结果就是undefined

定义方式二

var abs=function(x){
if(x>=0){
return x;  //注意js会自动在每行结尾加； 不要换行写
}else{
return -x;
}
}

function(x){……}是一个匿名函数。但是可以把结果赋值给abs，通过abs就可以调用函数！
两个方式等价

调用函数

abs（-10）
//10

参数问题：JS可以传任意个参数，也可以不传参数
参数进来是否存在的问题？
假设不存在参数，如何规避？ 手动抛出异常来判断，不存在规避问题

arguments

arguments是js免费赠送的关键词，代表传递进来所有的参数，是一个数组

rest

可以通过rest来获取除了已经定义的参数外的额外参数（比如定义两个参数而传入五个参数，则rest为后面三个参数组成的数组）；需要在函数定义时在最后添加…rest参数，只能放在最后。

变量的作用域

• 在JavaScript中 var定义变量实际是有作用域的。
  在函数体中用var或let声明的变量，在函数外是不能使用的

 function qj(){
        var x=1;
        x=x+1;
    }
x=x+2;   //Uncaught ReferenceError: x is not defined

• 在两个函数内分别定义同名变量，由于都是函数内的局部变量，并不会产生冲突
  函数内部的函数，可以访问外部函数的变量；反之不可以

//内部函数可以访问外部函数的变量
        function f1() {
            let x=0;
            f2();
            function f2() {
                alert(x);//输出0
            }
        }

• 以下代码会报错：应该是内部函数中存在x的声明，所以alert语句中会把x当成内部函数的局部变量而执行alert语句时x又没有被声明。

   function f1() {
            let x=0;
            f2();
            alert(x);
            function f2() {
                alert(x);//Uncaught ReferenceError: Cannot access 'x' before initialization
                let x=1;
            }
        }
        f1();

• 在内外函数均有一个同名函数的声明时，内外函数的变量相互独立

function f1() {
            let x=0;
            f2();
            alert(x);//0
            function f2() {
                let x=1;
                alert(x);//1
            }
        }
        f1();

• 全局变量

    //全局变量
        let x=0;
        function f() {
            alert(x);//0
        }

所有全局变量都会被绑定在全局对象window下：

  let a= 123;
        alert(a);//123
        alert(window.a);//123

alert本身也是一个window变量（在全局下声明的函数也是）

   //即使window自己也是自己的一个对象
        window.window.window.alert(123);

规范：由于所有全局变量都会绑定到全局对象下，如果不同的js文件使用了同名的全局变量，则会产生冲突，如何能够减少冲突？
可以把自己的变量全部放在自己定义的唯一命名空间中，即可降低命名空间冲突的问题

   var wang={};
        wang.name="wang "

• 局部作用域 let

 for (var x=1;x<100;x++){
        }
        for (let y=1;y<100;y++){
        }
        alert(x);//输出100
        alert(y);//抛出异常 y未定义

• 常量 const

     var PI=3.1415926;
        const Pi=3.1415926;
        PI=3;//其实可以改变
        Pi=3;//不可改变，直接报错Uncaught TypeError: Assignment to constant variable.

方法

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

function getAge() {
            let now =new Dat().getFullYear();
            return now-this.brith;
        }
        let hyx={
            name:"hyx",
            brith:1998,
            age:getAge()
        }
        hyx.age();//22
        getAge();//报错 this指向调用者，这里是window window没有brith
        getAge().apply(hyx,[]);//被动调用

内部对象

Date

now.toLocaleString();
//      "2020/8/1 上午8:45:20"
now.getTime();   //时间戳
new Date(now.getTime());
//Sat Aug 01 2020 08:45:20 GMT+0800 (中国标准时间)     时间戳转化为时间 
now.toGMTString()
// "Sat, 01 Aug 2020 00:45:20 GMT"     格林威治时间

JSON对象

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

在JS中一切皆为对象，任何js支持的类型都可以用JSON来表示。number，string……
格式：

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

  var user={
       name:"wang",
       age:12,
       sex:"male"
   }
   //对象转换为json字符串
    var json = JSON.stringify(user)
   //JSON字符串转换为对象
JSON.parse({"name":"wang","age":12,"sex":"male"})

Ajax

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

面向对象编程

JavaScript、Java、C#。。。。面向对象；JavaScript有些区别
类：模版
对象：具体的实例
在JavaScript中有所不同

原型继承

• 在JavaScript中，所有对象都有一个属性（？）为原型对象，即使是基本数据类型。可以通过对象.__proto__来访问到对象的原型对象。
• 如果要访问一个对象的方法或者属性，而对象本身又没有这个属性或者方法时，就会从这个对象的原型对象中去寻找，若没有又会从原型对象的原型对象去找直到不再存在更上级的原型对象为止。
• 由于在JavaScript中，一切自定义的对象所对应的原型均是Object，而Object是一切对象的祖宗（应该）。
• 需要注意，和java中一个类只能继承一个父类类似，一个对象所对应的原型对象只能有一个
• 注意：自己不能成为自己的原型，以自己为原型的对象也不能是自己的原型（即：原型关系不能成环）

 let Person={
            walk:function () {
                console.log(this.name+"walking");
            }
        }
        let Student={
            run:function () {
                console.log(this.name+"running");
            }
        }
        let xiaoming={
            name:'ming'
        }
        //小明并不能走或者跑
        //xiaoming.run();//Uncaught TypeError: xiaoming.run is not a function
        //添加原型__proto__
        xiaoming.__proto__=Person;
        xiaoming.walk();//mingwalking
        xiaoming.__proto__=Student;
        xiaoming.run();//mingrunning
        //同时只能有一个原型，能跑就不能走了
        xiaoming.walk();//Uncaught TypeError: xiaoming.walk is not a function
        //但是可以通过更改Student的原型对象为Person来同时可以跑和走
        Student.__proto__=Person;
        xiaoming.walk();//mingwalking
        xiaoming.run();//mingrunning
        //不被允许Uncaught TypeError: Cyclic __proto__ value
        Student.__proto__=Student;

• 常见对象的原型

  // window的原型
        console.log(window.__proto__);//Window  W大写
        console.log(window.__proto__.__proto__);//WindowProperties
        console.log(window.__proto__.__proto__.__proto__);//EventTarget
        console.log(window.__proto__.__proto__.__proto__.__proto__);//Object
        console.log(window.__proto__.__proto__.__proto__.__proto__.__proto__);//null
        //自建对象的原型
        console.log({}.__proto__)//Object
        console.log({}.__proto__.__proto__)//null
        //字符串的原型
        console.log('{}'.__proto__)//String
        console.log('{}'.__proto__.__proto__)//Object

  //老方法
        //这个函数大概是对应构造器？？
        function Student(name) {
            this.name=name;
        }
        //添加新方法
        Student.prototype.hello=function () {
            alert('hello!')
        }
        Student.prototype.sex='男';
        let xiaoming=new Student('ming');
        xiaoming.hello();
        alert(xiaoming.sex);

ES6：class继承

ES6之后！！！

   //定义一个类
        class Student{
            constructor(name) {
                this.name=name;
            }
            hello(){
                alert('hello');
            }
        }
        class CollegeStudent extends Student{
            constructor(name,major) {
                super(name);
                this.major=major;
            }
            play(){
                alert('王者荣耀排位中。。。');
            }
        }
        let xiaoming= new Student('ming');
        let xiaohong= new CollegeStudent('hong','Telecommunication Engineering');

BOM（重点）

JavaScript和浏览器的关系：
JavaScript的诞生就是为了让它在浏览器中运行
BOM：浏览器对象模型

- IE6~11
- Chrome
- safari
- Firefox

BOM是browser object model的缩写，简称浏览器对象模型 ，提供了独立于内容而与浏览器窗口进行交互的对象
1、window对象 ，是JS的最顶层对象，其他的BOM对象都是window对象的属性；
2、document对象，文档对象；
3、location对象，浏览器当前URL信息；
4、navigator对象，浏览器本身信息；
5、screen对象，客户端屏幕信息；
6、history对象，浏览器访问历史信息；

• window代表浏览器窗口

     //获取当前浏览器内部显示页面的高和宽
        window.innerHeight;
        window.innerWidth;
        //获取当前浏览器窗口的高和宽
        window.outerHeight;
        window.outerWidth;

• navigator：封装了浏览器的信息

 //由于这些参数可以被认为篡改，所以不推荐使用
        navigator.appName;
        //"Netscape"
        navigator.appVersion;
        //"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36"
        navigator.userAgent;
        //"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36"
        navigator.platform;
        //"Win32"

• screen：代表屏幕

  screen.width
        //1536
        screen.height
        //864

• location(重要！！)
  代表当前页面的url信息

       location.host;//主机
        //"localhost:63342"
        location.href;//指向位置     //"http://localhost:63342/%E5%89%8D%E7%AB%AF%E5%85%A5%E9%97%A8/JavaScript/17.window/index.html?_ijt=5m76na6ug64heg6od0k6ulqgep"
           location.protocol;//协议

 //"http:"
        location.reload();//重新加载，刷新网页
        //设置新的地址(重定向)
        location.assign('https://www.baidu.com')

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

 document.title
        //"百度一下，你就知道"
        document.cookie
        //"PSTM=xxxxx; BAIDUID=xxxxxx:......
        //可以获取也可以修改

• history
  代表浏览器的历史记录

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