狂神Java学习笔记————JavaScript（三）————面向对象和BOM

面向对象

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

在JavaScript中有所不同

1. 原型继承

• 在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);

2. 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

---

• 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();