js對象與對象原型

時間 2020-01-27

原文原文鏈接

一.js對象的建立

1.字面量方式建立

若是要建立大量的實例對象,代碼重複,冗餘

var p1={
    name:"gene",
    age:20,
    sayhi:function(){
        console.log('hello world')
    }
}
console.log(p1)
複製代碼

2.調用系統構造函數建立

全部的實例對象均可以調用系統構造函數來建立,那麼小狗和人是來自同一個父類嗎
若是要建立大量的實例對象,代碼重複,冗餘

var p=new Object();
    p.name="gene";
    p.age=20;
    p.sayhi=function(){
    console.log('hello world')
}
console.log(p);
複製代碼

3.工廠模式建立

函數名是小寫
有new
有返回值
new以後的對象是當前的對象
直接調用函數就能夠建立實例對象
工廠模式建立解決了建立大量實例對象出現代碼冗餘的問題
並無解決小狗和人是來自同一個父類的尷尬問題

function createObject(name,age){
    var obj=new Object();
    obj.name=name;
    obj.age=age;
    obj.sayhi=function(){
    	console.log('hello world')
    }
    return obj;
}
var p=createObject('gene',20);
console.log(p);
複製代碼

4.自定義構造函數

函數名首字母要大寫
沒有new
沒有返回值
this是當前對象
經過new的方式來建立實例對象

function Person(name,age){
    this.name=name;
    this.age=age;
    this.sex='男';
    this.sayhi=function(){
    	console.log('hello world')
    }
}
var p= new Person('gene',20);
console.log(p);
複製代碼

二.new操做符具體幹了什麼

1.在內存中建立一個空的對象javascript

2.讓this指向這個空的對象,並繼承該對象原型html

3.調用構造函數,目的是給對象屬性和方法java

4.返回一個對象程序員

三.構造函數與實例對象的關係

function Person(name,age){
    this.name=name;
    this.age=age;
    this.sex='男';
    this.sayhi=function(){
    	console.log('hello world')
    }
}
var p= new Person('gene',20);
console.dir(p);
console.dir(Person);
複製代碼

實例對象是經過構造函數來建立的,建立的過程叫實例化瀏覽器

這只是表面的理解,下面咱們從更深一層來理解函數

1.`proto`

實例對象p有個屬性__proto__,稱之爲原型,這既是一個屬性也是一個對象,這個屬性是給瀏覽器使用,不是標準的屬性,它的下面還有一個屬性constructor,稱之爲構造器,constructor的值指向生成該對象實例的構造函數Personui

2.`prototype`

構造函數Person下面有一個屬性prototype,也稱之爲原型,這個屬性是給程序員使用,是標準的屬性,它的下面也有一個屬性constructor,也叫構造器,constructor的值指向本身this

3.`proto`與`prototype`的關係

js對象都有__proto__屬性,也就是構造函數Person與實例對象p也有spa
只有函數/方法纔有prototype屬性prototype
實例對象的__proto__指向了構造函數的原型對象prototype

實例對象的構造器指向建立本身的構造函數

console.log(p.__proto__.constructor==Person);//true
console.log(p.__proto__.constructor==Person.prototype.constructor);//true
複製代碼

4.如何判斷實例對象是否是這種數據類型

判斷實例對象的構造器是否指向某一構造函數

<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title>js對象</title> </head> <body> <script> function Person(name,age){ this.name=name; this.age=age; this.sex='男'; this.sayhi=function(){ console.log('hello world') } } function Dog(name,age){ this.name=name; this.age=age; } var p= new Person('gene',20); var d=new Animal('wangcai',1); console.log(d.__proto__.constructor==Person.prototype.constructor);//false //結果返回false,說明對象實例d不是由構造函數Person來建立的 </script> </body> </html> 複製代碼

對象instanceof構造函數名字

console.log(d instanceof Person);//false,說明對象實例d不是由構造函數Person來建立的
複製代碼

注意:建議使用第二種方法

四.對象原型實現數據共享

<script>
    function Person(name,age) {
    this.name=name;
    this.age=age;
}
//經過原型來添加方法,解決數據共享,節省內存空間
Person.prototype.sayhi=function () {
    console.log("你好呀");
};

var p1=new Person("小明",20);
var p2=new Person("小紅",30);
p1.sayhi();
p2.sayhi();

console.log(p1.sayhi==p2.sayhi);//true

console.dir(p1);
console.dir(p2);
</script>
複製代碼

實例對象中根本沒有sayhi方法,可是可以使用,這是爲何?

構造函數的原型對象(prototype)中的方法是能夠被實例對象直接訪問的
若是對象實例是來自同一個構造函數,那麼這些對象實例即可以共享構造函數對象原型prototype中的數據
經過原型來添加方法,解決數據共享,節省內存空間

五.原型的簡單語法

<script>
    function Person(name,age) {
    this.name=name;
    this.age=age;
}
//經過原型來添加方法,解決數據共享,節省內存空間
Person.prototype = {
    color:'yellow',
    height:180
};

var p1=new Person("小明",20);
var p2=new Person("小紅",30);

console.log(p1.color);//yellow
console.log(p2.color);//yellow

</script>
複製代碼

六.原型中的方法是能夠互相訪問的

<script>
    //原型中的方法,是能夠相互訪問的
    function Animal(name,age) {
    this.name=name;
    this.age=age;
}
//原型中添加方法
Animal.prototype.eat=function () {
    console.log("動物吃東西");
    this.play();
};
Animal.prototype.play=function () {
    console.log("玩球");
    this.sleep();
};
Animal.prototype.sleep=function () {
    console.log("睡覺了");
};

var dog=new Animal("旺財",20);
dog.eat();
</script>
複製代碼