Javascript中的面向对象和定时器, BOM

时间:2021-04-12 00:07:19

一、JS中的面向对象

创建对象的几种常用方式

  1.使用Object或对象字面量创建对象

  2.工厂模式创建对象

  3.构造函数模式创建对象

  4.原型模式创建对象

1.使用Object或对象字面量创建对象

js中最基本创建对象的方式

var student = new Object();
student.name = "easy";
student.age = "20";

一个student对象就创建完毕,拥有2个属性name以及age,分别赋值为"easy"20

对象字面量方式创建对象

ar sutdent = {
  name : "easy",
  age : 20
};

2.工厂模式创建对象

js中没有类。可以使用一种函数将对象创建过程封装起来以便于重复调用,同时可以给出特定接口来初始化对象

function createStudent(name, age) {
  var obj = new Object();
  obj.name = name;
  obj.age = age;
  return obj;
}

var student1 = createStudent("easy1", 20);
var student2 = createStudent("easy2", 20);
...
var studentn = createStudent("easyn", 20);

对象的createFruit()函数:

function createFruit(name, color) {
  var obj = new Object();
  obj.name = name;
  obj.color = color;
  return obj;
}

var v1 = createStudent("easy1", 20);
var v2 = createFruit("apple", "green");
Javascript中的面向对象和定时器, BOMJavascript中的面向对象和定时器, BOM
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        
        //使用Object()内置的构造函数来创建对象


        // new Array()
        // []

        /*
        var person = new Object();

        person.name = 'alex';

        person.age = 18;

        person.fav = function() {
            
            alert(this.name);
        }
        person.fav();
        */
        /*
        // 字面量方式创建对象
        var person = {
            name:'玖妖',
            age:18,
            fav:function() {
                alert(this.name)
            }
        };

        person.fav();
        */


        function createPerson(){
            var person = new Object();
            person.name = 'alex';

            person.age = 18;

            person.fav = function() {
                
                alert(this.name);
            }
            return person;
        }


        
        function createFruit(){
            var fruit = new Object();
            fruit.name = 'alex';

            fruit.age = 18;

            fruit.fav = function() {
                
                alert(this.name);
            }
            return fruit;
        }
        var p1 = createPerson();
        var f1 = createFruit();

        console.log(p1 instanceof Object);
        console.log(f1 instanceof Object);

        


    </script>
</body>
</html>
创建方式

3.构造函数模式创建对象

构造函数:

var obj = new Object();

 创建原生数组Array类型对象时用过构造函数

var arr = new Array(10);  //构造一个初始长度为10的数组对象

构造函数和普通函数的区别: 

  1.调用方法 :  使用new操作符调用,那么它就是构造函数;不使用new操作符调用,那么它就是普通函数。

  2.构造函数名以大写字母开头,普通函数以小写字母开头

  3.使用new操作符调用构造函数时,会经历(1)创建一个新对象;(2)将构造函数作用域赋给新对象(使this指向该新对象);(3)执行构造函数代码;(4)返回新对象;4个阶段。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        // var arr = new Array();
        // console.log(arr);
        //自定义构造函数
        function Person(name,age) {
            
            this.name = name;
            this.age = age;
            this.fav = function() {
                alert(this.name);
            }
        }

        function Fruit(name,age) {
            
            this.name = name;
            this.age = age;
            this.fav = function() {
                alert(this.name);
            }
        }
        var p1 = new Person('alex',17);
        var f1 = new Fruit('wusir',19);
        console.log(p1 instanceof Object);
        console.log(f1 instanceof Object);
        console.log(p1 instanceof Person);
        console.log(f1 instanceof Fruit);

    </script>
    
</body>
</html>

用instanceof操作符来检测以上对象类型就可以区分出Student以及Fruit了:

alert(v1 instanceof Student);  //true
alert(v2 instanceof Student);  //false
alert(v1 instanceof Fruit);  //false
alert(v2 instanceof Fruit);  //true

alert(v1 instanceof Object);  //true 任何对象均继承自Object
alert(v2 instanceof Object);  //true 任何对象均继承自Object

将对象方法移到构造函数外部:

function Student(name, age) {
  this.name = name;
  this.age = age;
  this.alertName = alertName;
}

function alertName() {
  alert(this.name);
}

var stu1 = new Student("easy1", 20);
var stu2 = new Student("easy2", 20);

4.原型模创建对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <script>
        function Person(name,age) {
            this.name = name;
            this.age = age;             
        }
        // Person.prototype 它是person的父类


        // 原型 prototype
        Person.prototype.showName = function() {
            // this指的是person
            console.log(this.name)
        }
        var p1 = new Person('alex',18);
        console.log(p1);
        p1.showName();
    </script>
    
</body>
</html>

二、定时器

在js中的定时器分为两种: 1.setTimeOut( )    2.setInterval( )

1.setTimeOuo()

只在指定时间后执行一次

/定时器 异步运行  
function hello(){  
alert("hello");  
}  
//使用方法名字执行方法  
var t1 = window.setTimeout(hello,1000);  
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法  
window.clearTimeout(t1);//去掉定时器

2.setInterval()

在指定时间为周期循环执行

/实时刷新  时间单位为毫秒  
setInterval('refreshQuery()',8000);   
/* 刷新查询 */  
function refreshQuery(){  
  console.log('每8秒调一次') 
}

如果要求在每隔一个固定的时间间隔后就精确地执行某动作,那么最好使用setInterval.

每次函数的调用需要繁重的计算以及很长的处理时间,那么最好使用setTimeout

Javascript中的面向对象和定时器, BOMJavascript中的面向对象和定时器, BOM
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <button id="start">开启定时器</button>
    <button id="clear">清除定时器</button>

    <div id="box"></div>

    <!-- 定时器
        
        (1)一次性定时器
             可以做异步
        (2)循环周期定时器
            可以做动画

            js跟python一样 都有垃圾回收机制

            but 定时器对象 垃圾回收收不回


            开一次性定时器:
            var timer = setTimeout(fn,1000);
            开循环定时器
            setInterval(fn,1000);


            clearTimeout()
            clearInterval()
     -->

     <script>
         /*
         var timer = null;
         document.getElementById('start').onclick = function() {
             
             // 未来 数据交互的时候 如果数据阻塞了,可以考虑 加一个一次性定时器来处理
             timer  = setTimeout(function(){
                 console.log(1111);
             },3000);
             console.log(2222);

         }
         document.getElementById('clear').onclick = function() {
             clearTimeout(timer);
         }
         */
         var count = 0;
         var timer = null;
         document.getElementById('start').onclick = function() {

             var oDiv = document.getElementById('box');
             clearInterval(timer);
             
             timer = setInterval(function() {
                 count+=10;

                 oDiv.style.marginLeft = count + 'px';
                 
             }, 50)
         }
     </script>
</body>
</html>
定时器

三、BOM

BOM:Browser Object Model,浏览器对象模型。

BOM的结构图:

Javascript中的面向对象和定时器, BOM

window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象。

DOM是BOM的一部分。

window对象:

  • window对象是JavaScript中的*对象

  • 全局变量、自定义函数也是window对象的属性和方法。

  • window对象下的属性和方法调用时,可以省略window。

1.弹出系统对话框

  alert(1)window.alert(1)的简写,因为它是window的子方法。

2.打开窗口, 关闭窗口

  打开窗口:

window.open(url,target)

  url :  要打开的地址.

  target : 新窗口的位置.可以是 : _blank  ,  _self  ,  _parent父框架.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        
        <!--行间的js中的open() window不能省略-->
        <button onclick="window.open('https://www.luffycity.com/')">路飞学城</button>
        
        <button>打开百度</button>
        <button onclick="window.close()">关闭</button>
        <button>关闭</button>
        
    </body>
    <script type="text/javascript">
        
        var oBtn = document.getElementsByTagName('button')[1];
        var closeBtn = document.getElementsByTagName('button')[3];
        
        oBtn.onclick = function(){
                      //open('https://www.baidu.com')
            
            //打开空白页面
            open('about:blank',"_self")
        }
        closeBtn.onclick = function(){
            if(confirm("是否关闭?")){
                close();
            }
        }
        
    </script>
</html>

3.location对象

window.location可以简写成location。location相当于浏览器地址栏,可以将url解析成独立的片段。

  a.location对象的属性

    href : 跳转

    hash : 返回url中后面的内容 , 包括#

    host : 主机名 , 包括端口

    hostname : 主机名

    pathname : url 中的路径部分

    protocol : 协议 一般是http、https

    search : 查询字符串

例子; 点击盒子时 , 进行跳转

<body>
<div>smyhvae</div>
<script>

    var div = document.getElementsByTagName("div")[0];

    div.onclick = function () {
        location.href = "http://www.baidu.com";   //点击div时,跳转到指定链接
 //     window.open("http://www.baidu.com","_blank");  //方式二
    }

</script>
</body>

  5秒后自动跳转到百度

<script>

    setTimeout(function () {
        location.href = "http://www.baidu.com";
    }, 5000);
</script>

b. location对象的方法

  location.reload():重新加载

setTimeout(function(){
         //3秒之后让网页整个刷新
    window.location.reload();
            
            
},3000)

4.navigator对象

window.navigator 的一些属性可以获取客户端的一些信息。

  • userAgent:系统,浏览器)

  • platform:浏览器支持的系统,win/mac/linux

    console.log(navigator.userAgent);
    console.log(navigator.platform);

5.history对象

1、后退:

  • history.back()

  • history.go(-1):0是刷新

2、前进:

  • history.forward()

  • history.go(1)

Javascript中的面向对象和定时器, BOMJavascript中的面向对象和定时器, BOM
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<button id = 'btn'>上一页</button>
<script>
    alert(1);
    document.getElementById('btn').onclick = function () {

         //后退
        // history.go(-1);
        //  history.go(0);
        // 尽量少用 可以做测试 全局刷新  局部刷新(ajax)
        window.location.reload();
    }


</script>
</body>
</html>
后退 text