基本的面向?qū)ο?/h2>

• 擁有自己的屬性
• 擁有自己的方法
• 數(shù)值，字符，布爾，對象， undefined
• 數(shù)組， array

基本面向?qū)ο蟮膶懛?/strong>

var dog = {
        name:'小花',
        age:1,
        friendDogs:['小黃','小虎'],
        eat:function(someThing){
        console.log('吃' + someThing);
        },
        run:function(someWhere){
        console.log('跑' + someWhere);
        }
}
dog.eat('奶');
dog.run('樹下');

面向?qū)ο蟮某Ｓ脤懛?/h2>

function dog(){
        var obj = new Object();
        obj.name = '未定義';
        obj.age = 0;    
        obj.eat = function(someThing){
         console.log(this.name + '吃' + someThing)
        };
        obj.run = function(someWhere){
        console.log(this.name + '跑' + someWhere);
        }
        run obj;
}
var smallDog = dog();
smallDog.name = '小花';
smallDog.age  = 1;
smallDog.eat('奶')；
var bigDog = dog();
bigDog.name = '大花';
bigDog.age = 1;
bigDog.run('棠下');
bigDog.eat('肉');

this 對象的認(rèn)識

• this : this 所在的函數(shù)（方法）屬于哪個對象，那么 this 就表示哪個對象
• this 在事件指令中表示事件源
• window.所有的全局變量都是它的屬性，所有的全局的函數(shù)都是它的方法
• this 在定時器表示 window
• 任何一個函數(shù)都可以通過 New+ 函數(shù)調(diào)用創(chuàng)建一個對應(yīng)的對象
• 如果遇到 new 函數(shù)調(diào)用會創(chuàng)建一個新的對象，那么這個函數(shù)就屬于新創(chuàng)建的對象，所以 this 表示這個對象

通過構(gòu)造函數(shù)創(chuàng)建對象

• 構(gòu)造函數(shù)
  形式：第一個字母都是大寫
  new: 可以創(chuàng)建一個對象返回來

創(chuàng)建對象，使用構(gòu)造函數(shù)
function Dog(name,age,dogFriends){
        this.name = name;
        this.age = age;
        this.dogFriends = dogFriends;
        this.eat = function(someThing){
                  console.log(this.name + '吃' + someThing);
        }
        this.run = function(someWhere){
                  console.log(this.name +  '跑' + someWhere);
        }
}
//通過構(gòu)造函數(shù)創(chuàng)建對象
var smallDog = new Dog('小花',1，['小虎','小明'])；
smallDog.eat('奶');
smallDog.run('教室');

var bigDog = new Dog('大花',1，['大虎','大明'])；
bigDog.eat('肉');
bigDog.run('樹下');

通過構(gòu)造函數(shù)創(chuàng)建對象優(yōu)化

    //創(chuàng)建對象,使用構(gòu)造函數(shù)
    //優(yōu)化:就是使用json把參數(shù)保存起來,直接傳遞json
    function Dog(option) {
        var option = option ||{};

        this.name = option.name;
        this.age = option.age;
        this.dogFridends = option.dogFridends;
        this.eat = function (someThing) {

            console.log(this.name +'吃' + someThing);
        }
        this.run = function (someWhere) {
            console.log(this.name +'跑'+someWhere);
        }



    }

    //2.通過構(gòu)造函數(shù)創(chuàng)建對象
    var smallDog = new Dog({name:'小花',age:1,dogFriends:['小虎','小明']});
    console.log(smallDog.name);
    console.log(smallDog.age);
    smallDog.eat('奶');
    smallDog.run('教室');

    var bigDog = new Dog({name:'大花',age:8,dogFriends:['大虎','大明']});
    console.log(bigDog.name);
    console.log(bigDog.age);
    bigDog.eat('肉');
    bigDog.run('棠下');

• 當(dāng)我們使用不同的對象調(diào)用函數(shù)的時候，這個函數(shù)不是同一個函數(shù)
• 每次創(chuàng)建對象，調(diào)用函數(shù)的時候，這個函數(shù)都需要重新創(chuàng)建
• 但是這兩個函數(shù)功能是一樣的，我們每必要每次創(chuàng)建一個對象都使用新的函數(shù)
• 所以我們需要這個 eat 函數(shù)可以共用，無論哪個對象調(diào)用，都是同一個函數(shù)

原型屬性的使用

• 原型屬性：可以擴展屬性和方法，就是一個構(gòu)造函數(shù)的共享庫，以后所有創(chuàng)建的新的對象，都可以使用這個共享庫中的方法以及屬性
• 優(yōu)點是降低了創(chuàng)建方法的成本

Array.prototype.eat = function(){
        console.log('數(shù)組會吃東西');
}；
Array.prototype.run = function(){
        console.log('數(shù)組會跑');
};

//原型庫的第二種寫法
Dog.prototype = {
        eat:function(someThing){
                  console.log(this.name + 
'吃' +someThing);
        },
        run:function(someWhere){
                  console.log(this.name + '跑' +someWhere);
        }
};

通過構(gòu)造函數(shù)創(chuàng)建對象最終版

• 要把屬性也放在原型庫中，使用一個初始化方法 _init
• 在構(gòu)造函數(shù)中調(diào)用初始化方法，然后把這個初始化方法放在原型庫中，初始化方法用來初始化屬性

function Dog(option){
        this._init(option);
}
Dog.prototype = {
        _init:funtion(option){
                var option = option || {};
                this.name = option.name;
                this.age = option.age;
                this.dogFriends = option.dogFriends;
          },
          eat:funtion(someThing){
                  console.log(this.name + '吃' + someThing);
          }
}
ar smallDog = new Dog({name:'小花',age:1,dogFriends:['小虎','小明']});
    console.log(smallDog.name);
    console.log(smallDog.age);
    smallDog.eat('奶');
    smallDog.run('教室');

    var bigDog = new Dog({name:'大花',age:8,dogFriends:['大虎','大明']});
    console.log(bigDog.name);
    console.log(bigDog.age);
    bigDog.eat('肉');
    bigDog.run('棠下');

面向?qū)ο髣?chuàng)建一個矩形

 /*1.創(chuàng)建一個構(gòu)造函數(shù)用來創(chuàng)建矩形*/
    function Rect(option){
        this._init(option)
    }

    /*2.給rect設(shè)置原型對象*/
    Rect.prototype = {
        _init:function(option){
            var option = option ||{};
            /*2.1設(shè)置屬性*/
            /*2.11設(shè)置添加的父標(biāo)簽的id*/
             this.parentId = option.parentId;
            /*2.12設(shè)置寬度和高度*/
            this.width = option.width||100;
            this.height = option.height ||100;
            /*2.13設(shè)置位置*/
            this.left = option.left ||100;
            this.top = option.top ||100;
            /*2.14 設(shè)置其他屬性*/
            this.background = option.background ||'blue';
            this.borderRadius = option.borderRadius ||10;
            this.border = option.border ||0;





        },
        /*設(shè)置顯示方法*/
        render:function(){
            /*1.創(chuàng)建一個父標(biāo)簽，用來添加我們的矩形*/
            var parentNode = document.getElementById(this.parentId);
            var childremNode = document.createElement('div');
            parentNode.appendChild(childremNode);
            /*2.設(shè)置子標(biāo)簽的樣式*/
            childremNode.style.position = 'absolute';
            parentNode.style.position = 'relative';
            childremNode.style.width = this.width +'px';
            childremNode.style.height = this.height +'px';
            childremNode.style.left = this.left +'px';
            childremNode.style.top = this.top +'px';
            childremNode.style.background = this.background;
            childremNode.style.borderRadius = this.borderRadius +'px';
            childremNode.style.border = this.border;




        }

    }

    /*創(chuàng)建一個矩形*/
//    this.width = option.width||100;
//    this.height = option.height ||100;
//    /*2.13設(shè)置位置*/
//    this.left = option.left ||100;
//    this.top = option.top ||100;
//    /*2.14 設(shè)置其他屬性*/
//    this.background = option.background ||'blue';
//    this.borderRadius = option.borderRadius ||10;
//    this.border = option.border ||0;

    var myRect = new Rect({parentId:'main',width:200,height:100,left:200,top:200,background:'red',borderRadius:10,border:'1px solid #ccc'});
    alert(myRect);


    /*渲染*/
    myRect.render();

閉包的認(rèn)識

• 如果訪問一個局部變量，但是出了作用域就訪問不到，我們想要訪問這個變量需要使用閉包
• 閉包是在函數(shù)內(nèi)部使用函數(shù)或者定義函數(shù)
• 閉包作用域鏈條：就是子對象可以訪問對象所有的屬性，反之不可以
  就是訪問變量的時候，會沿著作用域鏈條向上訪問，不能反過來
• 閉包的優(yōu)點是延長變量的使用周期，缺點是耗費性能

//第一步
function sum(){
        var num = 10;
        var result = function(){
                  console.log(num);
        }
        return result;
}
var result =  sum();
//這樣可以把變量通過返回函數(shù)的形式傳遞出來
//實際上內(nèi)部函數(shù)可以匿名
function sun(){
        var num = 10;
        return function(){
                  console.log(num);
        }
} 
var result = sum();
console.log(num);
//第二種寫法
sum()()
//這就是匿名函數(shù)傳遞參數(shù)

匿名函數(shù)自調(diào)

• 匿名函數(shù)自調(diào)內(nèi)部可以繼續(xù)使用匿名函數(shù)自調(diào)
• 當(dāng)訪問變量的時候，會先從自己的作用域訪問對應(yīng)的變量，如果沒有，就沿著作用域鏈條向上訪問，知道找到為止，如果沒有返回未定義
• 為了提高性能一般不要多層嵌套匿名函數(shù)自調(diào)
• 為了提高性能一般不要使用全局變量

var num = 20;
(function(){
        (function(){
               console.log(num);
        })()
})(num)

• 當(dāng)使用全局變臉的時候，會把 window 中的所有的東西遍歷一遍，直到找到對應(yīng)的變量

for(var key in window){
}

訪問變量的簡單認(rèn)識以及應(yīng)用

//第一種寫法,兩次定義全局變量極其消耗性能，兩次遍歷 window
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn1');
//第二種寫法，匿名函數(shù)的自調(diào),只遍歷一次 window 且是函數(shù)內(nèi)部的局部變量
(function(){
        var d = document;
        var btn1 = d.getElementById('btn1');
        var btn2 = d.getElementById('btn2');
})()
//第二種寫法的變形，將document當(dāng)作參數(shù)傳遞進(jìn)去
(functiojn(document){
        var btn1 = document.getElementById('btn1');
        var btn2 = document.getElementById('btn2');
})(document)

高級排他

var lis = document.getElementById('li');
//用來記錄上一個移動到的位置
var lastIndex = 0;
for(var i = 0 ; i < lis.length;i++){
        (function(index){
                lis[i].onmouseover = function(){
                  lis[lastIndex].className = "";
                  this.className = 'curr';
                  lastIndex = index;
                  }
        })(i)
}

使用閉包實現(xiàn)數(shù)據(jù)截流

function throtte(delay,fn){
        var timer = null;
        return function(){
                clearTimerout(timer);
                timer = setTimerout(fn,delay)
        }
}

window.onresize = throtte(300,function(){
        alert(0);
})