js day25

一、構(gòu)造函數(shù)

說構(gòu)造函數(shù)的概念之前我們應(yīng)該先了解類的概念,類與對象的概念息息相關(guān),我們在講對象的概念的時候說過,一只貓是一個對象,一個人是一個對象,一章桌子也是一個對象,那么我們平時說的貓,人,桌子在沒有特定指出是哪一個對象的時候,我們其實說的就是類。我們身邊有人類,貓也是 一個類,任何有相同屬性和方法的對象我們都可以稱他們?yōu)橐粋€類。

在很多面向?qū)ο笳Z言中都有類的概念,但是在javascript(es5)中沒有類。而我們可以通過構(gòu)造函數(shù)來模擬一個類。
function Cat(){
    this.name='miaomiao';
    this.age=12;
    this.sayName=function(){
        console.log('我們是貓類');
    }
}
var cat=new Cat();
console.log(cat.name);
cat.sayName();
構(gòu)造函數(shù)的函數(shù)名首字母大寫,可以通過在函數(shù)中的this為類設(shè)置屬性和方法,我們在上面的代碼中為貓這個類定義了一個name屬性,并賦值為"miaomiao",類創(chuàng)建完成后,我們可以通過new關(guān)鍵字創(chuàng)建這個類的實例。例如cat這個變量就是Cat類的一個實例。

我們可以通過傳參的方式,在實例化對象的時候為對象設(shè)置屬性

function Cat(name,age){
    this.name=name;
    this.age=age;
    this.sayName=function(){
        console.log('我是'+this.name);
    }
}

var cat=new Cat('mioamiao',12);
cat.sayName();
console.log(cat);

一個構(gòu)造函數(shù)可以生成多個對象的實例

function Person(name,age){
    this.name=name;
    this.age=age;
    this.say=function(){
        console.log('大家好');
    }
}
var lily=Person('lily',12);
var lucy=Person('lucy',13);
console.log(lily);
console.log(lucy);
console.log(lily.say==lucy.say);
一個構(gòu)造函數(shù)Person生成了兩個對象實例lily和lucy,并且有兩個屬性和一個方法。但是,它們的hobby方法是不一樣的。也就是說,每當你使用new來調(diào)用構(gòu)造函數(shù)放回一個對象實例的時候,都會創(chuàng)建一個hobby方法。這既沒有必要,又浪費資源,hobby方法完全可以被兩個對象實例共享。           

構(gòu)造函數(shù)的缺點就是:同一個構(gòu)造函數(shù)的對象實例之間無法共享屬性或方法。

為了解決構(gòu)造函數(shù)的對象實例之間無法共享屬性的缺點,js提供了prototype屬性。
//每一個構(gòu)造函數(shù)都有一個prototype屬性,這個屬性指向一個原型對象,這個原型對象上的所有屬性和方法都可以被這個構(gòu)造函數(shù)的實例使用

function Person(name,age){
    this.name=name;
    this.age=age;
}
Person.prototype.hobby=function(){
    return 'movie';
}
var girl=new Cat('rose',12);
var boy=new Cat('jack',18);
console.log(girl.hobby==boy.hobby);

//如果將hobby方法放在原型對象上,那么兩個實例對象都共享著同一個方法。

二、變量和流量

我們之前一直使用var定義變量,在ES6版本中,我們可以使用let定義變量,下面我們來說說var與let的區(qū)別。

1)塊級作用域

//S5只有全局作用域和函數(shù)作用域,沒有塊級作用域的概念,這帶來了很多不合理的場景??聪旅娴拇a
for(var i = 0;i<10;i++){
    console.log(i); // 0-9
}
console.log(i);     // 10
//因為沒有塊級作用域,所以我們在for語句的外面仍然能獲取i的值,在實際開發(fā)中,這是一個不可理喻的場景,我們希望的是這個i只在for語句內(nèi)有效,所以再ES6中添加了塊級作用域的概念,我們可以用let聲明變量,問題就解決了

for(let i = 0;i<10;i++){
    console.log(i); // 0-9
}
console.log(i);     // 報錯 i is not defined

//因為用let聲明變量,變量只在塊級作用域下有效,所以再for語句之外輸出i會報錯。

2)不存在變量提升

我們使用var定義變量會發(fā)生“變量提升”,我們來看下面的代碼

console.log(number);             //undefied
var number = 100;               

console.log(string);             //報錯
let string = "hello world";
變量提升會導致我們在變量聲明之前使用變量也不會報錯,但是這個變量的值是undefined,這是不合理的,因為然我們要使用這個變量,那就應(yīng)該提前聲明,如果沒有提前聲明,就應(yīng)該給予錯誤提示。所以再ES6中我們使用let聲明變量,如果在聲明變量前使用變量就會報錯。

關(guān)于報錯,有些同學會感覺不報錯要比報錯好,但實際開發(fā)中,如果程序運行與我們的語氣不符,我們更希望看到錯誤信息,這樣有利于我們更快地發(fā)現(xiàn)問題。

3)不允許重復聲明

在ES5中,我們可以多次聲明同一個變量

var a = 10;
var a = 20;

let b = 10;
let b = 20;  //報錯
//但是多次聲明是沒有意義的,在ES6中,我們使用let聲明變量限制了不能多次聲明,如果多次聲明同一個變量回報錯。

4)常量

在ES6中,不僅有變量,還增加了常亮的概念,我們用const聲明常亮,一旦聲明,它的值就不能再改變

const PI = 3.1415926;
PI = 3                   //報錯

我們說常亮不能再改變,說的是不能重新為這個常亮賦值,但是如果常亮存儲的是一個對象,那我們是可以改變這個對象的屬性的

const obj = {name:'小明'};
obj.name = '小紅';
console.log(obj.name);   //小紅
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容