JavaScript從初級往高級走系列————prototype

SKYZACK 發布于2019-08-23 13:45 / 891人閱讀

摘要：原文博客地址另一篇轉載的從初級往高級走系列原型定義原型是對象的一個屬性，它定義了構造函數制造出的對象的公共祖先。

原文博客地址：https://finget.github.io/2018/09/13/proto/

另一篇轉載的JavaScript從初級往高級走系列————prototype

原型

定義： 原型是function對象的一個屬性，它定義了構造函數制造出的對象的公共祖先。通過該構造函數產生的對象，可以繼承該原型的屬性和方法。原型也是對象。

用一張圖簡單解釋一下定義。

每個函數上面都有一個原型屬性(prototype)，這個屬性會指向構造函數的原型對象(Person.prototype)

每個函數的原型對象(Person.protorype)默認都有一個constructor屬性指向構造函數本身(Person)

每個實例都有一個隱式原型(__proto__)指向構造函數的原型對象(Person.prototype)

每個原型對象也有隱式原型(__proto__)

// 構造函數
function Person() {
  this.LastName = "zhang"
}
// Person.prototype  --- 原型 (自帶的，當定義了構造函數，它就孕育而生了)
// Person.prototype = {} --- 原型對象 是祖先
Person.prototype.name = "xiaoming";
var person = new Person()
var person1 = new Person()
console.log(person.name); // xiaoming (它自己沒有，就會到原型(祖先)上去找)
console.log(person1.LastName); // zhang (它自己有，就會取自身的)

constructor

function Person() {
}
var person = new Person()
console.log(person.constructor) // function Person() {} 
// person自己沒有constructor,所以繼承至原型

Person.prototype:

圖中淺紫色的都是自帶的

function Person() {
}
function Car() {
}
Person.prototype.constructor = Car; // 改變constructor
var person = new Person()
console.log(person.constructor) // function Car() {}

proto

// __proto__
function Person() {
    
}
Person.prototype.name = "zhangsan"
var person = new Person()
console.log(person.__proto__)

new

New的過程

聲明一個中間對象

將中間對象的原型指向構造函數的原型

將構造函數的this指向中間對象

返回中間對象，即實例對象

JavaScript —— New

function DNew() {
  // var obj = {}; // var obj = new Object() 創建一個空對象 
  // var obj = Object.create(null);
  Constructor = [].shift.call(arguments); // 獲取第一個參數即構造函數
  // obj.__proto__ = Constructor.prototype; 
  var obj = Object.create(Constructor.prototype);
  var result = Constructor.apply(obj, arguments); 
  return typeof result === "object" ? result || obj : obj; // 返回對象
}

在通過new 一個實例對象時：
function Person() {
  var this = {
    __proto__ : Person.prototype
  }
}

person.__proto__ 與 Person.prototype是指向同一個內存地址，這也就是 為什么實例沒有屬性或方法會到原型上去查找

function Person() {
    
}
Person.prototype.name = "zhangsan"
var person = new Person()
Person.prototype.name = "lisi"
console.log(person.name) // ???

function Person() {
    
}
Person.prototype.name = "zhangsan"
var person = new Person()
Person.prototype = {
  name : "lisi"
}
console.log(person.name) // ???

原型鏈

先扔一張圖：

Person.prototype.__proto__ : Object.prototype

例子：

function Grand() {

}
Grand.prototype.lastName = "zhang"
var grand = new Grand()

function Father() {

}
Father.prototype = grand // Father的原型指向grand對象
var father = new Father()

function Son() {

}
Son.prototype = father // Son的原型指向father
var son = new Son()

上圖中紅線表示的就是原型鏈了

Object.create()

// Object.create(原型)
var obj = {name: "zhang",age: 23}
var obj1 = Object.create(obj)

Person.prototype.name = "zhang"
function Person() {}
var person = Object.create(Person.prototype)

Object.create(null),null就是一個空對象，沒有原型。這也是·typeof null == "object"的原因

toString

undefined和null沒有toString()

true.toString()

"abc".toString()

var num = 123
num.toString()
// 123.toString() 試一試會怎樣

var obj = {}
obj.toString() // "[object Object]"

toString來自哪？？

var num = 123
// num.toString(); --> new Number(num).toString()
// Number重寫 toString
Number.prototype.toString = function() {}

// Number.prototype.__proto__ = Object.prototype

function Person(){}
Person.prototype.toString = function () {
  return "重寫toString"
}
var person = new Person()
person.toString() // "重寫toString"

// Object.prototype.toString
// Number.prototype.toString
// Array.prototype.toString
// Boolean.prototype.toString
// String.prototype.toString

toString隱藏功能：判斷變量、對象的類型

call/apply

function Person(name, age) {
  this.name = name
  this.age = age
}
var person = new Person("zhang", 23)
var obj = {}
Person.call(obj,"wang",30) // this指向obj
// obj = {age:30,name:"wang"}

call/apply不僅改變了this的指向，還會執行對應的方法

var cat = {
  name: "咪咪"
}
function beatTheMonster(){
  console.log(this.name);
}
beatTheMonster.call(cat);

// 1.call 改變了this的指向。改變到了cat上。
// 2.beatTheMonster函數/方法執行了
// 3.bind()，保存了方法，并沒有直接調用它

最后

創建了一個前端學習交流群，感興趣的朋友，一起來嗨呀！

云服務器 GPU云服務器 javascript_prototype 從電腦往u盤下載視頻怎么轉碼阿里云的服務器從公賬怎么走 javascript初級入門

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99509.html

JavaScript從初級往高級走系列————ES6

摘要：采用二八定律，主要涉及常用且重要的部分。對象是當前模塊的導出對象，用于導出模塊公有方法和屬性。箭頭函數函數箭頭函數把去掉，在與之間加上當我們使用箭頭函數時，函數體內的對象，就是定義時所在的對象，而不是使用時所在的對象。 ES6 原文博客地址：https://finget.github.io/2018/05/10/javascript-es6/ 現在基本上開發中都在使用ES6，瀏覽器環境...

孫淑建 2019-08-23 13:45 評論0 收藏0
JavaScript從初級往高級走系列————異步

摘要：之所以是單線程，取決于它的實際使用，例如不可能同添加一個和刪除這個，所以它只能是單線程的。所以，這個新標準并沒有改變單線程的本質。原文博客地址：https://finget.github.io/2018/05/21/async/ 異步什么是單線程，和異步有什么關系什么是event-loop 是否用過jQuery的Deferred Promise的基本使用和原理介紹一下asyn...

andot 2019-08-23 13:46 評論0 收藏0
JavaScript從初級往高級走系列————MVVM-Vue

摘要：原文博客地址如何理解如何實現是否解讀過的源碼與框架的區別實現實現獨立初始化實例兩者的區別數據和視圖的分離，解耦開放封閉原則，對擴展開放，對修改封閉在中在代碼中操作視圖和數據，混在一塊了以數據驅動視圖，只關心數據變化，原文博客地址：https://finget.github.io/2018/05/31/mvvm-vue/ MVVM 如何理解 MVVM 如何實現 MVVM 是否解讀過 ...

codercao 2019-08-23 13:46 評論0 收藏0
JavaScript從初級往高級走系列————Virtual Dom

摘要：當中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響布局的，比如。則就叫稱為重繪。原文博客地址：https://finget.github.io/2018/05/22/virtualDom/ 什么是虛擬DOM 用JS模擬DOM結構 DOM變化的對比，放在JS層來做（圖靈完備語言）提高重繪性能重繪和回流頁面渲染過程：showImg(https://seg...

tinyq 2019-08-23 13:45 評論0 收藏0
JavaScript進階之模擬new Object過程

摘要：后續我將推出進階系列，一方面是一個監督自己學習的一個過程，另一方面也會給看到的童鞋一些啟發。第二步鏈接到原型中現在把構造函數和參數都打印出來了。原文：https://zhehuaxuan.github.io/... 作者：zhehuaxuan 寫在前面的話前端的入門相對簡單，相對于其他方向天花板可能會相對較低。但是在市場上一個優秀的前端依舊是很搶手的。能夠站在金字塔上的人往往寥寥...

chengtao1633 2019-08-23 15:55 評論0 收藏0