js重點與難點（轉）

javascript

  • LazyMan

    • 實現LazyMan（什么是LazyMan？請自行google）
    function _LazyMan(_name) {
    var _this = this;
    _this.tasks = [];
    _this.tasks.push(function() {
        console.log('Hi! This is ' + _name + '!');
        // 這里的this是window，所以要緩存this
        _this.next();
    });
    setTimeout(function() {
        _this.next();
    }, 0);
}

// push函數里面的this和setTimeout函數里面的this都指向全局作用域，所以要緩存當前this指向
_LazyMan.prototype.next = function() {
    var _fn = this.tasks.shift();
    _fn && _fn();
}
_LazyMan.prototype.sleep = function(_time) {
    var _this = this;
    _this.tasks.push(function() {
        setTimeout(function() {
            console.log('Wake up after ' + _time);
            _this.next();
        }, _time);
    });
    return _this;
}
_LazyMan.prototype.sleepFirst = function(_time) {
    var _this = this;
    _this.tasks.unshift(function() {
        setTimeout(function() {
            console.log('Wake up after ' + _time);
            _this.next();
        }, _time);
    });
    return _this;
}
_LazyMan.prototype.eat = function(_eat) {
    var _this = this;
    _this.tasks.push(function() {
        console.log('Eat ' + _eat);
        _this.next();
    });
    return _this;
}

// 封裝對象
var LazyMan = function(_name) {
    return new _LazyMan(_name);
}

  • 數據類型

    • 6種原始值（不可變?！俺侵刂卯斍白兞?，否則不能改變元素值。”）
      1. Null(只有一個值： null)
      2. Undefined(一個沒有被賦值的變量會有個默認值 undefined)
      3. Number
      4. Boolean(兩個值：true 和 false)
      5. String
      6. Symbol
    • 和Object(對象指內存中的可以被標識符引用的一塊區域)

  • 數據類型檢測

    • typeof(對變量或值調用 typeof 運算符將返回(字符串)下列值之一)
      1. undefined - Undefined類型
      2. number - Number類型
      3. boolean - Boolean類型
      4. string - String類型
      5. symbol - Symbol類型(ECMAScript6新增)
      6. function - 函數對象([[Call]]在ECMA-262條款中實現了)
      7. object - 引用類型 或 Null類型
    typeof(Function) // function (Function是函數對象)
typeof(new Function) // function (new Function也是是函數對象，同等：var func = function(){})
typeof(Array) // function (Array是函數對象)
typeof(new Array) // object（實例化的Array就是object）

  • 變量賦值時候的返回值：

    var name = 123; // 返回undefined
name = 456; // 返回456

    結語：定義變量的時候賦值返回:undefined
    給已聲明變量賦值時候返回當前賦值。

  • 獲取元素距離頁面的top、left

    function getRec(ele) {
    var _t = document.documentElement.clientTop,
        _l = document.documentElement.clientLeft,
        rect = ele.getBoundingClientRect();
    return {
        top: rect.top - _t,
        right: rect.right - _l,
        bottom: rect.bottom - _t,
        left: rect.left - _l
    }
}

    注意：IE、Firefox3+、Opera9.5、Chrome、Safari支持，在IE中，默認坐標從(2,2)開始計算，導致最終距離比其他瀏覽器多出兩個像素，我們需要做個兼容。

  • 數字的固定小數位數

    var a=8.88888,
    b=8;
console.log(a.toFixed(2)); // 8.89 或者 8.88
console.log(b.toFixed(2)); // 8.00

  • js是編譯語言，數組長度是隨時程序變化而變化的

    var arr = [0, 1];
arr[3] = 3;
console.log(arr[2]); // undefined
console.log(arr.length); // 4

  • 矩陣的轉置

    var arr = [ // 定義一個矩陣（二維數據）
    [1, 2, 3, 4],
    [5, 6, 6, 6],
    [7, 6, 7, 8],
    [8, 5, 3, 3]
];

function changeArr(arr) { // 矩陣轉置函數
    var c;
    for (var i = 1; i < arr.length; i++) {
        for (var j = 0; j < i; j++) {
            c = arr[i][j];
            arr[i][j] = arr[j][i];
            arr[j][i] = c;
        }
    }
}
changeArr(arr);
console.table(arr);

  • 冒泡排序方法

    // 第一輪是對n-1的位置定位
// 第二輪是 每一個位置的數的 確定
var arr = [1, 4, 5, 6, 99, 111, 112, 113, 133],
    temp = 0,
    flag = false;
for (var i = 0; i < arr.length - 1; i++) {
    document.writeln('come');
    for (var j = 0; j < arr.length - 1 - i; j++) {
        if (arr[j] > arr[j + 1]) {
            temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
            flag = true;
        }
    }
    if (flag) {
        flag = false;
    } else {
        break;
    }
}
for (var i = 0; i < arr.length; i++) {
    document.writeln(arr[i]);
};

  • 二分查找

    var arr = [41, 55, 76, 87, 88, 99, 123, 432, 546, 577, 688, 786];

function twoFind(arr, wantVal, leftIndex, rightIndex) {
    if (leftIndex > rightIndex) {
        document.writeln('SORRY: 找不到 ' + wantVal + ' ！');
        return;
    }
    var minIndex = Math.floor((leftIndex + rightIndex) / 2);
    if (arr[minIndex] > wantVal) {
        twoFind(arr, wantVal, leftIndex, minIndex - 1);
    } else if (arr[minIndex] < wantVal) {
        twoFind(arr, wantVal, minIndex + 1, rightIndex);
    } else {
        document.writeln('找到了 ' + wantVal + ' ,下表為' + minIndex);
    }
}
twoFind(arr, 9, 0, arr.length - 1);

  • js對象訪問屬性的二種方式

    function Person () {};
var new1 = new Person ();
new1.name='馮杰';
new1.age=21;
window.alert(new1.name);
window.alert(new1["age"]);

  • js之delete只能刪除對象的屬性

    function Person () {};
var me = new Person();
me.name='馮杰';
console.log(me.name);
delete me.name;
console.log(me.name);

  • 在js中對象的方法不是通用的，如果生成n個對象，那么就有n個內存堆棧

    // js 中 一切類 繼承自 Object 而Object 有propotype
// 下面是解決辦法 prototype 獲得類的static性質
function God() {}
God.prototype.shout = function() {
    window.alert('小狗叫');
}
var dog1 = new God();
var dog2 = new God();
dog1.shout();
dog2.shout();

  • 對象

    // js里要想創建對象 除了一般的創建方式 還有 通過Object 方式創建類
// Object 類是所有js類的基類 Object 就表示對象（一切的對象）
var p1 = new Object();
p1.name = 'fj';
window.alert(p1.name);
window.alert(p1.constructor);

// 原型鏈上新增默認對象方法
var num = new Number(1);
var num2 = 10;
window.alert(num.constructor);
window.alert(num2.constructor);
// 上面2個彈出是一樣的
Number.prototype.add = function(a) { //prototype是屬于類的
    return this + a;
}
window.alert(num.add(1).add(2));

// 小實驗 為Array 添加 find(val) 方法
Array.prototype.find = function(a) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] == a) {
            return i;
        }
    }
    return 'find fail.';
}
var arr = [0, 1, 2, 77, 4, 5];
window.alert(arr.find(77));

  • arguments

    function abc() {
    var sum = 0;
    for (var i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}
window.alert(abc(1, 2, 3));

  • call函數目的就是改變對象的this指向

    var Person = {
    name: 'fjj'
};

function test() {
    window.alert(this.name);
}
test.call(Person);

  • 體會js的封裝

    function Person() {
    var name = 'fj'; //私有
    this.age = 21; //共有
}
var p1 = new Person();
window.alert(p1.name); //undefined
window.alert(p1.age); //21

  • prototype的方法不能訪問私有屬性和方法

    function Person() {
    var name = 'fj'; //私有
    this.age = 21;
}
Person.prototype.showName = function() {
    window.alert(this.name);
}
Person.prototype.showAge = function() {
    window.alert(this.age);
}
var p1 = new Person();
p1.showName();
p1.showAge();

  • 繼承

    // js 里面是對象冒充來繼承的 不算是真正的繼承 通過對象冒充 js可以實現多重繼承和繼承的效果 但是沒有Extends關鍵字
function Father(name, age) {
    this.name = name;
    this.age = age;
    this.show = function() {
        window.alert(this.name + '---' + this.age);
    }
}

function Son(name, age) {
    this.Father = Father;
    this.Father(name, age); //通過對象冒充 實現繼承 這一句非常重要 js是動態語言 不是編譯語言 要執行才會分配空間
}
var me = new Son('fj', 21);
window.alert(me.name);
me.show();

  • 重載

    // js從常理來說是不支持重載的 但是又可以說是天然支持重載 因為js天然支持可變參數 而且我們可以通過arguments[]數組的長度判斷 而做出相應的處理

  • 閉包

    // 閉包實際上設計一個對象的屬性，何時被gc處理的問題 閉包和gc是相關聯的

  • 數組長度

    // 數組的長度是根據下標的最大而確定的
var arr = new Array();
arr['a'] = 1;
arr['b'] = 2;
window.alert(arr.length); // 打出0
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 工廠模式類似于現實生活中的工廠可以產生大量相似的商品，去做同樣的事情，實現同樣的效果;這時候需要使用工廠模式。簡單...
    舟漁行舟閱讀 7,827評論 2贊 17
  • 第一章： JS簡介 從當初簡單的語言，變成了現在能夠處理復雜計算和交互，擁有閉包、匿名函數， 甚至元編程等...
    LaBaby_閱讀 1,697評論 0贊 6
  • title: js面向對象date: 2017年8月17日 18:58:05updated: 2017年8月27日...
    lu900618閱讀 581評論 0贊 2
  • 1.語言基礎2.嚴格模式3.js組成（ECMAScript DOM BOM）4.各種(DOM BOM)例子5.組件...
    蒲公英_前端開發者閱讀 1,558評論 0贊 3
  • 在意的到底是少了 是否 分得清 甘于平庸 或是 看清人生 我想要成為什么 到底是個難題 為何要追逐 為何要繼續 為...
    咸朦閱讀 278評論 0贊 0