[JS相關(guān)的記錄01] 那什么來面對你，面向?qū)ο缶幊?proto,prototype,con

raledong 發(fā)布于2019-08-20 16:44 / 2179人閱讀

摘要：首先定義空函數(shù)這個不用解釋，然后把這個空函數(shù)的原型指向為的原型，然后再把的原型指向這個新的對象，一個完美傳遞最后，在把原型的構(gòu)造方法定義成華麗的轉(zhuǎn)身，結(jié)果如下結(jié)果還是不對，于是我又在大神的肩膀上墊了一下腳。

總是聽說面向?qū)ο螅?，繼承，__proto__，prototype，constructor.......于是乎小整理一下。

首先說，JS里的繼承是怎么弄的呢？

首先創(chuàng)建類(Person)

var Person = {
    male: 0,
    age:0,
    name:"nothing",
    say:function(){
        console.log("Hello World");
    }
}

如何創(chuàng)建一個人呢？

var createPerson = function(){
    return Object.create(Person);
}

創(chuàng)建學(xué)生

var Student = createPerson();
Student.say() //Hello World
Student.__proto__ === Person //true
Student.constructor === Person //Student的構(gòu)造器還是Object

從這個可以看出什么呢？可以看出所謂的繼承，就是下面的代碼而已：

SSSSS.__proto__ = BBBBB

但是呢？也沒有prototype啥關(guān)系嘛，因為壓根就和他沒關(guān)系，好像也不太好，換一種寫法好了。

function Person (props){
    this.name = props.name || "nothing";
    this.male = props.male || 0;
    this.age = props.age || 0;
    this.say = function(){
        console.log("Hello world!");
    }
}

繼續(xù)創(chuàng)建student

var Student = new Person();
Student.__proto__ === Person.prototype  //true
Student.constructor === Person //true
Student.say() //Hello world!

從上面代碼可以看出，Student繼承了Person.
如果我們想改變一下呢？

Student.say = function(){
    console.log("Hello teacher, my name is " + this.name);//Hello teacher, my name is nothing
}

那好，再創(chuàng)建一個coder類

var Coder = new Person();
Coder.say(); //Hello world!

這個不錯嘛，這樣在想創(chuàng)建Coder的子類，js和html,那就修改一下代碼

function Coder (props){
    Person.call(this,props);
    this.tip = props.tip?props.tip.toUpperCase():"";
    this.intro = function(){
        console.log("I know "+(this.tip?this.tip:"nothing"));
    }
    this.say= function(){
        console.log("hello, my name is " + this.name);
    }
}
var JSer = new Coder({
    name:"Tony",
    age:26,
    tip:"js"
});
var htmler = new Coder({
    name:"Jermy",
    age:26,
    tip:"html"
});
JSer.say();    //hello, my name is Tony
htmler.say();  //hello, my name is Jermy
JSer.intro();  //I know JS
htmler.intro();//I know HTML

這樣得到了我們想要的結(jié)果，驗證一下繼承關(guān)系：

JSer instanceof Coder; //true
htmler instanceof Coder;//true
Coder instanceof Person;//false

這樣就不好了，為什么不是繼承關(guān)系呢？查看一下Coder情況如何？

Coder.__proto__ === Person.prototype; //false
Coder.__proto__  //function () { [native code] }

看來問題就出在這里，寫一個中間函數(shù)補充一下？

var pass = function(child,parent){
    var F = function(){};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
}

為了實現(xiàn)這一點，參考道爺（就是發(fā)明JSON的那個道格拉斯）的代碼，中間對象可以用一個空函數(shù)F來實現(xiàn)，大神寫的代碼，就是特么讓人深思。
仔仔細(xì)細(xì)想了下，我個人是這么理解的。
首先定義空函數(shù)這個不用解釋，然后把這個空函數(shù)的原型指向為Parent的原型，然后再把Child的原型指向這個新的F對象，一個完美傳遞；
最后，在把Child原型的構(gòu)造方法定義成Child；
華麗的轉(zhuǎn)身，結(jié)果如下：

function Coder (props){
    Person.call(this,props);
    this.tip = props.tip?props.tip.toUpperCase():"";
    this.intro = function(){
        console.log("I know "+(this.tip?this.tip:"nothing"));
    }
    this.say= function(){
        console.log("hello, my name is " + this.name);
    }
}
var pass = function(Child,Parent){
    var F = function(){};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
}
pass(Coder, Person);
var JSer = new Coder({
    name:"Tony",
    age:26,
    tip:"js"
});
var htmler = new Coder({
    name:"Jermy",
    age:26,
    tip:"html"
});
JSer.say();    //hello, my name is Tony
htmler.say();  //hello, my name is Jermy
JSer.intro();  //I know JS
htmler.intro();//I know HTML

JSer instanceof Coder; //true
htmler instanceof Coder;//true
Coder instanceof Person;//false

結(jié)果還是不對，于是我又在大神的肩膀上墊了一下腳。

var pass = function(Child,Parent){
    var F = function(){};
    F.prototype = Parent.prototype;
    Child.__proto__ = new F();
    Child.__proto__.constructor = Child;
}

結(jié)果就正確了......

又查了一下，總結(jié)一下：

所有的對象都有__proto__屬性，該屬性對應(yīng)該對象的原型.

所有的函數(shù)對象都有prototype屬性，該屬性的值會被賦值給該函數(shù)創(chuàng)建的對象的_proto_屬性.

所有的原型對象都有constructor屬性，該屬性對應(yīng)創(chuàng)建所有指向該原型的實例的構(gòu)造函數(shù).

函數(shù)對象和原型對象通過prototype和constructor屬性進行相互關(guān)聯(lián).

雖說弄懂了些表面的東西，實際上最主要的原因還是沒明白，那就是原型鏈到底有什么用呢？

好了，以上就是今天總結(jié)的一些內(nèi)容，希望相互學(xué)習(xí)幫助，能夠在未來更好的工作生活。
信息來源：

(↓相關(guān)一些對我?guī)椭艽?，Git的學(xué)習(xí)就是在這里看的，說的很詳細(xì)也很生動↓)
廖雪峰JavaScript教程
JS原型、原型鏈深入理解
深入分析js中的constructor 和prototype

GPU云服務(wù)器云服務(wù)器 Lesson01_04 Lesson02_01 __JS js public_

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/83121.html

發(fā)表評論

登陸后可評論

0條評論

raledong

男|高級講師

我要關(guān)注我要私信

TA的文章

力扣-----python兩數(shù)之和問題（超詳細(xì)，適合初學(xué)者）

閱讀 1677·2021-11-22 09:34
html2canvas在vue下的巨坑

閱讀 1737·2019-08-29 16:36
CSS2:寬度與高度疑難點解析

閱讀 2723·2019-08-29 15:43
瀏覽器緩存機制

閱讀 3162·2019-08-29 13:57
未知寬度水平居中的幾種方法

閱讀 1353·2019-08-28 18:05
whislte抓包

閱讀 1940·2019-08-26 18:26
setTimeout方法注意事項

閱讀 3306·2019-08-26 10:39
vue項目發(fā)布

閱讀 3510·2019-08-23 18:40

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

[JS相關(guān)的記錄01] 那什么來面對你，面向?qū)ο缶幊?proto,prototype,con

相關(guān)文章

淺談面向對象的javascript幾個特性

再談JavaScript面向對象思想及繼承

深入淺出面向對象和原型【番外篇——重新認(rèn)識new】

理解JavaScript的核心知識點：原型

JS對象(1)重新認(rèn)識面向對象

發(fā)表評論

0條評論

raledong

男|高級講師

TA的文章

力扣-----python兩數(shù)之和問題（超詳細(xì)，適合初學(xué)者）

html2canvas在vue下的巨坑

CSS2:寬度與高度疑難點解析

瀏覽器緩存機制

未知寬度水平居中的幾種方法

whislte抓包

setTimeout方法注意事項

vue項目發(fā)布

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

[JS相關(guān)的記錄01] 那什么來面對你，面向?qū)ο缶幊?__proto__,prototype,con

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

[JS相關(guān)的記錄01] 那什么來面對你，面向?qū)ο缶幊?proto,prototype,con