原型和繼承

vvpale 發布于2019-08-26 12:13 / 3344人閱讀

摘要：原型在中函數是一個包含屬性和方法的類型的對象原型就是類型對象的一個屬性每個函數都有一個屬性它默認指向一個空對象即原型對象原型對象中有一個屬性它指向函數對象原型是用于保存對象的共享屬性和方法的原型的屬性和方法并不會影響函數本身的屬性和方

原型

在JS中函數是一個包含屬性和方法的Function類型的對象原型prototype就是Function類型對象的一個屬性
每個函數都有一個prototype屬性, 它默認指向一個Object空對象---即:原型對象
原型對象中有一個屬性constructor, 它指向函數對象
原型是用于保存對象的共享屬性和方法的原型的屬性和方法并不會影響函數本身的屬性和方法

 function fn(){
 return "hello"
}
console.log(typeof fn.prototype)   //object

獲取原型

通過構造函數的prototype屬性

  function fn(){
   console.log("this is a function")
}
  console.log(fn.prototype);   //{constructor: ?}

通過Object對象的getgetPrototypeOf()方法

function fn(){
console.log("this is a function")
}
console.log(Object.getPrototypeOf(fn));   //? () { [native code] }

原型的屬性和方法

原型的屬性和方法多帶帶進行定義

  構造函數.prototype.屬性名 = 屬性值
  構造函數.prototype.方法名 = function(){
}

直接為原型定義一個新對象

  構造函數.prototype = {
  屬性名:屬性值,
  方法:function(){}
}

自有屬性與原型屬性

自有屬性:通過對象的引用添加的屬性
原型屬性:從原型對象中繼承而來如果原型對象中屬性值改變則所有繼承
自該原型的對象屬性都改變

 function Person(name){
 //構造函數本身的屬性 --> 自有屬性
 this.name = name;
}
//通過構造函數Person的prototype新增屬性 --> 原型屬性
 Person.prototype.age=29
 var man=new Person("林更新");
 console.log(man.name);  //林更新
 console.log(man.age)    //29

 var woman=new Person("宋佳");
 woman.age=38;
 console.log(woman.name) //宋佳
 console.log(woman.age)  //38
 Person.prototype.age=18;
 console.log(man.age)  //18
 console.log(woman.age)   //38

檢測自有原型屬性

使用hasOwnProperty()方法檢測對象是否具有指定的自有屬性

  function Person() {

    }
    var man =new Person()
    console.log(man.hasOwnProperty("name"))   //false

使用in關鍵字檢測對象及其原型鏈中是否具有指定屬性

    function Person() {

    }
    var man =new Person()
    console.log("name" in man)    //false

顯示原型對象和隱式原型對象

每個函數function都有一個prototype，即顯式原型

每個實例對象都有一個__proto__，可稱為隱式原型

對象的隱式原型的值為其對應構造函數的顯式原型的值

函數的prototype屬性: 在定義函數時自動添加的, 默認值是一個空Object對象

對象的__proto__屬性: 創建對象時自動添加的, 默認值為構造函數的prototype屬性值

我們能直接操作顯式原型, 但不能直接操作隱式原型(ES6之前)

function Person() {
    this.name="MasterYi"
}
Person.prototype.age=100;
var man=new Person;
console.log(man.prototype); // undefined 表示對象中不存在該屬性
console.log(man.__proto__); // {age: 100, constructor: ?}

原型鏈

訪問一個對象的屬性時，先在自身屬性中查找，找到返回

如果沒有, 再沿著__proto__這條鏈向上查找, 找到返回

如果最終沒找到, 返回undefined

__proto__這條原型查找鏈就是原型鏈: 隱式原型鏈

讀取對象的屬性值時: 會自動到原型鏈中查找

設置對象的屬性值時: 不會查找原型鏈, 如果當前對象中沒有此屬性, 直接添加此屬性并設置其值

方法一般定義在原型中, 屬性一般通過構造函數定義在對象本身上

作用:用來查找對象的屬性(方法)

云服務器 GPU云服務器原型繼承原型鏈繼承 js原型鏈的繼承 java反射和繼承

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

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

JavaScript面向對象---原型鏈繼承

摘要：因為這造成了繼承鏈的紊亂，因為的實例是由構造函數創建的，現在其屬性卻指向了為了避免這一現象，就必須在替換對象之后，為新的對象加上屬性，使其指向原來的構造函數。這個函數接收兩個參數子類型構造函數和超類型構造函數。最近一直在研究js面向對象，原型鏈繼承是一個難點，下面是我對繼承的理解以下文章借鑒自CSDN季詩筱的博客原型鏈繼承的基本概念： ES中描述了原型鏈的概念，并將原型鏈作為實現...

vspiders 2019-08-20 13:33 評論0 收藏0
JavaScript繼承理解：ES5繼承方式+ES6Class繼承對比

摘要：寄生組合式繼承的繼承方式有多種主要有原型鏈繼承借用構造函數組合式繼承寄生式繼承和寄生組合式繼承。中利用定義類，實現類的繼承子類里調用父類構造函數實現實例屬性和方法的繼承子類原型繼承父類原型，實現原型對象上方法的繼承。 JavaScript中實現繼承 ??在JavaScript中實現繼承主要實現以下兩方面的屬性和方法的繼承，這兩方面相互互補，既有共享的屬性和方法，又有特有的屬性和方法。 ...

liaoyg8023 2019-08-26 12:09 評論0 收藏0
JavaScript 的繼承方式及優缺點

摘要：繼承簡介在的中的面向對象編程，繼承是給構造函數之間建立關系非常重要的方式，根據原型鏈的特點，其實繼承就是更改原本默認的原型鏈，形成新的原型鏈的過程。 showImg(https://segmentfault.com/img/remote/1460000018998684); 閱讀原文前言 JavaScript 原本不是純粹的 OOP 語言，因為在 ES5 規范中沒有類的概念，在 ...

nanchen2251 2019-08-23 12:18 評論0 收藏0
js原型和繼承

摘要：舉例說明組合繼承組合繼承利用原型鏈借用構造函數的模式解決了原型鏈繼承和類式繼承的問題。示例組合式繼承是比較常用的一種繼承方法，其背后的思路是使用原型鏈實現對原型屬性和方法的繼承，而通過借用構造函數來實現對實例屬性的繼承。對js原型和繼承的理解一直處于不懂-懂-不懂-懂-不懂。。。的無限循環之中，本來打算只是簡單總結下js繼承方式，可看了些網上的資料后，發現又不懂繼承了。。。這篇文章只...

Hujiawei 2019-08-21 13:49 評論0 收藏0
js繼承的理解

摘要：創建自定義的構造函數之后，其原型對象只會取得屬性，其他方法都是從繼承來的。優缺點寄生式繼承在主要考慮對象而不是創建自定義類型和構造函數時，是十分有用的。原文鏈接：https://kongchenglc.coding.me... 1.原型鏈 ??js的繼承機制不同于傳統的面向對象語言，采用原型鏈實現繼承，基本思想是利用原型讓一個引用類型繼承另一個引用類型的屬性和方法。理解原型鏈必須先理...

BlackFlagBin 2019-08-20 16:34 評論0 收藏0
JavaScript繼承方式詳解

摘要：可以通過構造函數和原型的方式模擬實現類的功能。原型式繼承與類式繼承類式繼承是在子類型構造函數的內部調用超類型的構造函數。寄生式繼承這種繼承方式是把原型式工廠模式結合起來，目的是為了封裝創建的過程。 js繼承的概念 js里常用的如下兩種繼承方式：原型鏈繼承（對象間的繼承）類式繼承（構造函數間的繼承）由于js不像java那樣是真正面向對象的語言，js是基于對象的，它沒有類的概念。...

Yangyang 2019-08-21 10:23 評論0 收藏0