JavaScript基础知识

核能气质少年 提交于 2020-03-01 05:52:48

数据类型

  • 六种基本类型
    • Undefined
    • Null
    • Boolean
    • Number
    • String
    • Symbol(ECMAScript6新加类型)
  • 一种引用类型
    • Object

注:

  • 值 undefined 实际上是从值 null 派生来的,因此 ECMAScript 把它们定义为相等的
  • NaN不等于自身即(NaN==NaN)为false

对象类型

  • 本地对象
    • Object
    • Function
    • Array
    • String
    • Boolean
    • Number
    • Date
    • RegExp
    • Error
    • EvalError
    • RangeError
    • ReferenceError
    • SyntaxError
    • TypeError
    • URIError
  • 内置对象(所有的内置对象都是内置对象)
    • Global 
    • Math
  • 宿主对象(BOM DOM对象)

定义类或对象

  • 工厂方式

  • function createCar() {
      var oTempCar = new Object;
      oTempCar.color = "blue";
      oTempCar.doors = 4;
      oTempCar.mpg = 25;
      oTempCar.showColor = function() {
        alert(this.color);
      };
      return oTempCar;
    }
    
    var oCar1 = createCar();
    var oCar2 = createCar();

    缺点:新建对象时,对象中的方法每次都会重新创建一次,造成浪费。

          解决办法:将方法分离出来,每次引用方法即可

  • function showColor() {
      alert(this.color);
    }
    function createCar() {
      var oTempCar = new Object;
      oTempCar.color = "blue";
      oTempCar.doors = 4;
      oTempCar.mpg = 25;
      oTempCar.showColor = showColor;
      return oTempCar;
    }

     

  • 构造函数方式

  • function Car(sColor,iDoors,iMpg) {
      this.color = sColor;
      this.doors = iDoors;
      this.mpg = iMpg;
      this.showColor = function() {
        alert(this.color);
      };
    }
    
    var oCar1 = new Car("red",4,23);
    var oCar2 = new Car("blue",3,25);

    缺点同工厂方式,解决办法相同

  • 原型方式

  • function Car() {
    }
    
    Car.prototype.color = "blue";
    Car.prototype.doors = 4;
    Car.prototype.mpg = 25;
    Car.prototype.showColor = function() {
      alert(this.color);
    };
    
    var oCar1 = new Car();
    var oCar2 = new Car();

    缺点

    • 使用原型方式,不能通过给构造函数传递参数来初始化属性的值

    • 属性指向的是对象时会造成共享问题

  • 混合的构造函数/原型方式

  • function Car(sColor,iDoors,iMpg) {
      this.color = sColor;
      this.doors = iDoors;
      this.mpg = iMpg;
      this.drivers = new Array("Mike","John");
    }
    
    Car.prototype.showColor = function() {
      alert(this.color);
    };
    
    var oCar1 = new Car("red",4,23);
    var oCar2 = new Car("blue",3,25);

     

  • 动态原型方法

  • function Car(sColor,iDoors,iMpg) {
      this.color = sColor;
      this.doors = iDoors;
      this.mpg = iMpg;
      this.drivers = new Array("Mike","John");
      
      if (typeof Car._initialized == "undefined") {
        Car.prototype.showColor = function() {
          alert(this.color);
        };
    	
        Car._initialized = true;
      }
    }

     

几种方式的总结:推荐使用混合的构造函数/原型方式及动态原型方法这两种方式建对象

typeof 运算符

  • undefined - 如果变量是 Undefined 类型的
  • boolean - 如果变量是 Boolean 类型的
  • number - 如果变量是 Number 类型的
  • string - 如果变量是 String 类型的
  • object - 如果变量是一种引用类型或 Null 类型的

Window 尺寸

有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:

  • window.innerHeight - 浏览器窗口的内部高度
  • window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5:

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth

或者

  • document.body.clientHeight
  • document.body.clientWidth

实用的 JavaScript 方案(涵盖所有浏览器):

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

可用宽度和高度

var height = screen.availHeight;
var width = screen.availWidth;

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!