JavaScript基礎（3）-JS中的面向對象、定時器、BOM、位置信息

時間 2019-11-09

標籤 javascript 基礎面向對象定時器 bom 位置信息欄目 JavaScript 简体版

原文原文鏈接

1、建立對象的幾種經常使用方式、javascript

一、使用Object或對象字面量建立對象；html

a、使用Object()內置的構造函數來建立對象，例如：java

    var student = new Object();  // 建立一個student對象
    student.name = "easy";  // 屬性name
    student.age = 20;  // 屬性age

b、字面量方式，例如：python

    var student = {
        name : "easy",
        age : 20
    };

二、工廠模式建立對象；linux

JS中沒有類的概念，那麼咱們不妨就使用一種函數將以上對象建立過程封裝起來以便於重複調用，同時能夠給出特定接口來初始化對象，例如：數組

　　function createStudent(name, age){
    　　var obj = new Object();
    　　obj.name = name;
    　　obj.age = age;
    　　return obj;
　　}
　　function createFruit(name, color){
    　　var obj = new Object();
    　　obj.name = name;
    　　obj.color = color;
   　　 return obj;
　　}
　　var s1 = createStudent("easy", 20);
　　var f1 = createFruit("apple", "green");
　　console.log(s1,f1); 
　　// Object {name: "easy", age: 20} Object {name: "apple", color: "green"}

總結：對於以上代碼建立的對象s一、f1，咱們用instanceof操做符去檢測，他們通通都是Object類型，而咱們但願s1是Student類型的，而f1是Fruit類型的，爲了實現這個目標，咱們能夠用自定義構造函數的方法來建立對象。瀏覽器

三、構造函數模式建立對象；app

上面建立Object這樣的原生對象的時候就使用過其構造函數：var obj = new Object();異步

建立原生數組Array類型對象時也使用過其構造函數：var obj = new Array();函數

那麼咱們如今介紹一下構造函數和普通函數有什麼區別：

a、實際上並不存在建立構造函數的特殊語法，其與普通函數惟一的區別在於調用方法。對於任意函數，使用new操做符調用，那麼它就是構造函數；不使用new操做符調用，那麼它就是普通函數；

b、按照慣例，咱們約定構造函數名以大寫字母開頭，普通函數以小寫字母開頭，這樣有利於顯性區分兩者，例如上面的new Array()，new Object()；

c、使用new操做符調用構造函數時，會經歷(1)建立一個新對象；(2)將構造函數做用域賦給新對象（使this指向該新對象）；(3)執行構造函數代碼；(4)返回新對象；四個階段；

瞭解構造函數和普通函數的區別後，咱們用構造函數將工廠模式的函數重寫，並添加一個方法屬性，如：c

　　function Student(name, age) {   // 自定義構造函數Student
   　　 this.name = name;
    　　this.age = age;
    　　this.alertName = function(){
        　　alert(this.name)
    　　};
　　}
　　function Fruit(name, color) {   // 自定義構造函數Fruit
    　　this.name = name;
    　　this.color = color;
   　　 this.alertName = function(){
        　　alert(this.name)
   　　 };
　　}
　　var s1 = new Student("easy", 20);
　　var f1 = new Fruit("apple", "green");

　　console.log(s1 instanceof Student);  // true
　　console.log(f1 instanceof Fruit);  // true
　　console.log(s1 instanceof Object);  // true  任何對象均繼承自Object
　　console.log(f1 instanceof Object);  // true  任何對象均繼承自Object

總結：這樣咱們解決了工廠模式沒法區分對象類型的尷尬，可是使用構造函數來建立對象時，咱們發現，Student和Fruit對象中有一樣的方法，因此咱們徹底能夠將對象方法（函數）移到構造函數外部，因而就有了原型模式建立對象。

四、原型模式建立對象；

原型鏈甚至原型繼承，是整個JS中最難的一部分也是最很差理解的一部分，在此沒有過多介紹，對js有興趣的話，能夠去查閱一下相關JS原型的一些知識點。

下面是原型模式建立對象的示例：

　　function Student() {
    　　this.name = 'easy';
   　　 this.age = 20;
　　}
　　Student.prototype.alertName = function(){
　　// Student.prototype是Student的父類
  　　  alert(this.name);
　　};
　　var stu1 = new Student();
　　var stu2 = new Student();

　　stu1.alertName();  // easy
　　stu2.alertName();  // easy
　　alert(stu1.alertName == stu2.alertName);  // true 兩者共享同一函數

2、定時器

js中的定時器分兩種：setTimeout()、setInterval()。

setTimeout()和setInterval()是HTML DOM Window對象的兩個方法。

一、setTimeout()：在指定的毫秒數後執行指定代碼（一次性定時器）

語法：myVar = window.setTimeout(回調函數,毫秒數); 例如：

　　<button>點我</button>
　　<p>取消</p>
　　<script type="text/javascript">
    　　var oBtn = document.getElementsByTagName('button')[0];
    　　var oP = document.getElementsByTagName('p')[0];
    　　oBtn.onclick = function myFunction(){
        　　var timer = setTimeout(function(){
            　　alert("Hello")
        　　},3000);
    　　}
    　　oP.onclick = function () {
        　　clearTimeout(timer); // 中止執行setTimeout()方法的函數代碼
    　　}
　　</script>

總結：

　　　　1）window.setTimeout 和window.clearTimeout()方法能夠不使用window 前綴；

　　　　2）一次性定時器能夠作異步（數據交互時，若數據阻塞了，能夠考慮加一個一次性定時器來處理）；

二、setInterval()：間隔指定的毫秒數不停地執行指定的代碼，例如：

語法：window.setInterval(回調函數,毫秒數); 例如：

　　<p>頁面上顯示時鐘：</p>
　　<p id="demo"></p>
　　<button onclick = "myStopFunction()">中止</button>
　　<script>
  　　  var timer = setInterval(function(){myTimer()},1000);
    　　function myTimer(){
        　　var d = new Date();
       　　 var t = d.toLocaleTimeString();
       　　 document.getElementById("demo").innerHTML = t;
   　　 }
   　　 function myStopFunction(){
        　　clearInterval(timer);
   　　 }
　　</script>

總結：

　　　　1）window.setInterval()和window.clearInterval()方法能夠不使用window前綴；

　　　　2）能夠作動畫；

注意：js跟python同樣，都有垃圾回收機制，可是垃圾回收不能收回定時器對象，因此記得關定時器。兩種方法根據不一樣的場景和業務需求擇而取之，對於這兩個方法，須要注意的是若是要求在每隔一個固定的時間間隔後就精確地執行某動做，那麼最好使用setInterval，而若是不想因爲連續調用產生互相干擾的問題，尤爲是每次函數的調用須要繁重的計算以及很長的處理時間，那麼最好使用setTimeout。

3、BOM

BOM：Browser Object Model，瀏覽器對象模型。

window對象是BOM的頂級(核心)對象，全部對象都是經過它延伸出來的，也能夠稱爲window的子對象。所以DOM是BOM的一部分。

　　window對象：

　　　　window對象是JavaScript中的頂級對象；

　　　　全局變量、自定義函數也是window對象的屬性和方法；

　　　　window對象下的屬性和方法調用時，能夠省略window；

下面介紹幾個BOM的常見內置方法和內置對象：

一、打開窗口、關閉窗口

    window.open(url,target); // window可不寫
    // url: 要打開的地址    target: _blank 、_self 、_parent

二、location對象

window.location能夠簡寫成location。location至關於瀏覽器地址欄，能夠將url解析成獨立的片斷。

a、location對象的屬性：

　　　　1）href：跳轉；

　　　　2）hash：返回url中#後面的內容，包含#；

　　　　3）host：主機名，包括端口；

　　　　4）hostname：主機名；

　　　　5）pathname： url中的路徑部分；

　　　　6）protocol：協議，通常是http、https；

　　　　7）search：查詢字符串；

b、location對象的方法：

　　　　1）location.reload()：從新加載，例如：

    setTimeout(function(){
         // 3 秒以後讓網頁整個刷新
        window.location.reload();
    },3000)

三、history對象（用的很少，由於瀏覽器中已自帶了這些功能的按鈕）

window.history 對象包含瀏覽器的歷史，在編寫時可不使用 window 這個前綴。

a、後退（與在瀏覽器點擊後退按鈕相同）

　　　　history.back();

　　　　history.go(-1);

b、前進（與在瀏覽器中點擊向前按鈕相同）

　　　　history.forward();

　　　　history.go(1);

c、刷新（與在瀏覽器中點擊刷新鈕相同）

　　　　history.go(0);

四、navigator對象

window.navigator 對象包含有關訪問者瀏覽器的信息，在編寫時可不使用 window 這個前綴。

window.navigator 的一些屬性能夠獲取客戶端的一些信息，例如：

　　　　userAgent：用戶代理，系統，瀏覽器；

　　　　platform：硬件平臺，瀏覽器支持的系統，win/mac/linux；

注意：來自 navigator 對象的信息具備誤導性，不該該被用於檢測瀏覽器版本，這是由於：

　　　　1）navigator 數據可被瀏覽器使用者更改；

　　　　2）一些瀏覽器對測試站點會識別錯誤；

　　　　3）瀏覽器沒法報告晚於瀏覽器發佈的新操做系統；

4、位置信息（client、offset、scroll系列）

一、client系列

　　<div class="box" style="width: 200px; height: 200px; border: 10px solid red; padding: 80px;"></div>
　　<script type="text/javascript">
     　　/*
    　　 * clientTop 內容區域到邊框頂部的距離，說白了，就是邊框的高度
    　　 * clientLeft 內容區域到邊框左部的距離，說白了就是邊框的寬度
   　　  * clientWidth 內容區域 + 左右padding   可視寬度
   　　  * clientHeight 內容區域 + 上下padding   可視高度
    　　 */
  　　  var oBox = document.getElementsByClassName('box')[0];
  　　  console.log(oBox.clientTop);  // 10
  　　  console.log(oBox.clientLeft);  // 10
   　　 console.log(oBox.clientWidth);  // 360
  　　  console.log(oBox.clientHeight)  // 360
　　</script>

應用：獲取屏幕的可視區域　　

　　<script type="text/javascript">
 　　   // 屏幕的可視區域
  　　  window.onload = function(){
        　　// document.documentElement 獲取的是html標籤
      　　  console.log(document.documentElement.clientWidth);
      　　  console.log(document.documentElement.clientHeight);
      　　  // 窗口大小發生變化時，會調用此方法
      　　  window.onresize = function(){
           　　 console.log(document.documentElement.clientWidth);
            　　console.log(document.documentElement.clientHeight);
      　　  }
　　    }
　　</script>

二、offset系列

　　<div class="wrap" style=" width: 300px; height: 300px; background-color: green; margin-left: 20px; position: relative;">
   　　 <div id="box" style="width: 200px; height: 200px; border: 5px solid red; position: absolute; top:50px; left: 30px;">
    　　</div>
　　</div>
　　</body>
　　<script type="text/javascript">
    　　window.onload = function(){
        　　var oBox = document.getElementById('box');
        　　/*
        　　* offsetWidth 佔位寬  內容 + padding + border
      　　  * offsetHeight 佔位高
       　　 * offsetTop: 若是盒子沒有設置定位 到body的頂部的距離,若是盒子設置定位，那麼是以父輩爲基準的top值
       　　 * offsetLeft: 若是盒子沒有設置定位 到body的左部的距離，若是盒子設置定位，那麼是以父輩爲基準的left值
       　　 */
       　　 console.log(oBox.offsetWidth); // 210
      　　  console.log(oBox.offsetHeight);  // 210
       　　 console.log(oBox.offsetTop);  // 50
      　　  console.log(oBox.offsetLeft); // 30
   　　 }
　　</script>

三、scroll系列

　　<div class="wrap" style=" width: 300px; height: 300px; background-color: green; margin-left: 20px; position: relative;">
   　　 <div id="box" style="width: 200px; height: 200px; border: 5px solid red; position: absolute; top:50px; left: 30px;">
    　　</div>
　　</div>
　　</body>
　　<script type="text/javascript">
    　　window.onload = function(){
        　　var oBox = document.getElementById('box');
        　　/*
        　　* offsetWidth 佔位寬  內容 + padding + border
      　　  * offsetHeight 佔位高
       　　 * offsetTop: 若是盒子沒有設置定位 到body的頂部的距離,若是盒子設置定位，那麼是以父輩爲基準的top值
       　　 * offsetLeft: 若是盒子沒有設置定位 到body的左部的距離，若是盒子設置定位，那麼是以父輩爲基準的left值
       　　 */
       　　 console.log(oBox.offsetWidth); // 210
      　　  console.log(oBox.offsetHeight);  // 210
       　　 console.log(oBox.offsetTop);  // 50
      　　  console.log(oBox.offsetLeft); // 30
   　　 }
　　</script>
複製代碼
三、scroll系列

複製代碼
　　<body style="width: 2000px; height: 2000px;">
  　　  <div style="height: 200px;background-color: red;"></div>
  　　  <div style="height: 200px;background-color: green;"></div>
  　　  <div style="height: 200px;background-color: yellow;"></div>
  　　  <div style="height: 200px;background-color: blue;"></div>
   　　 <div style="height: 200px;background-color: gray;"></div>
   　　 <div id = 'scroll' style="width: 200px;height: 200px;border: 1px solid red;overflow: auto;padding: 10px;margin: 5px 0px 0px 0px;">
      　　  <p style="height: 800px;">這裏是內容</p>
   　　 </div>
　　</body>
　　<script type="text/javascript">
    　　window.onload = function(){
       　　 //實時監聽滾動事件
      　　  window.onscroll = function(){
      　　  console.log(1111);
      　　  console.log('上'+document.documentElement.scrollTop);
      　　  console.log('左'+document.documentElement.scrollLeft);
      　　  console.log('寬'+document.documentElement.scrollWidth);
      　　  console.log('高'+document.documentElement.scrollHeight);
       　　 };

       　　 var oS = document.getElementById('scroll');
       　　 oS.onscroll = function(){
       　　 // scrollHeight : 內容的高度 + padding  不包含邊框
       　　     console.log('上'+oS.scrollTop);
       　　     console.log('左'+oS.scrollLeft);
       　　     console.log('寬'+oS.scrollWidth);
       　　     console.log('高'+oS.scrollHeight);
      　　  }
   　　 }
　　</script>