【JavaScript】面向對象之原型

Cristalven 發布于2019-08-26 12:14 / 2165人閱讀

摘要：一原型概括原型是什么對象包含數學方法的函數，函數定義在屬性，初始值為一個空對象原型的屬性和方法不會影響函數自身的屬性和方法類型的屬性所有函數都具有的屬性定義函數原型的默認值是空對象函數包含構造函數所有引用類型其實都是構造函數獲取原型通過

JS(JavaScript)
一.原型
1.概括

原型是什么

Function對象包含數學方法的函數，函數定義在protoype屬性，初始值為一個空對象
原型的屬性和方法不會影響函數自身的屬性和方法

// Function類型的屬性 -> 所有函數都具有的屬性
console.log(Function.prototype);
// 定義函數
function fn(){
    console.log("this is function");
}
// 原型的默認值是空對象
console.log(fn.prototype);
// 函數包含構造函數 -> 所有引用類型其實都是構造函數
console.log(Number.prototype);
console.log(Object.prototype);
var result = Object.getOwnPropertyDescriptor(Object.prototype, "constructor");
console.log(result);

獲取原型

通過兩種方式，來設置共存的屬性和方法
構造函數的prototype屬性
Object對象的getPrototype

function fn(){
    console.log("this is function");
}
// 使用訪問對象的屬性語法結構
console.log(fn.prototype);
console.log(fn["prototype"]);
// Object類型提供getPrototypeOf()方法
console.log(Object.getPrototypeOf(fn));

原型的屬性和方法

通過一下兩種方式
多帶帶定義原型的屬性和方法
直接型定義個新對象

function fn(){
    console.log("this is function");
}
// 變量proto也是一個空對象
// var proto = fn.prototype;

// 新增屬性或方法
// proto.name = "犬夜叉";
fn.prototype.name = "犬夜叉";
console.log(fn.prototype);
// defineProperty()
Object.defineProperty(fn.prototype, "age", {
    value : 18,
    enumerable : true
});
console.log(fn.prototype);

2.原型屬性

自有屬性與原型屬性

自有屬性；對象引用增加屬性，獨立的屬性函數本身的屬性
原型屬性；通過新增屬性和方法并定義原型的屬性

// 定義構造函數
function Hero(name){
    // 構造函數本身的屬性 -> 自有屬性
    this.name = name;
    this.sayMe = function(){
        console.log("this is function");
    }
}
// 通過構造函數Hero的prototype新增屬性或方法
// 通過原型所定義的屬性 -> 原型屬性
Hero.prototype.age = 18;
/*
    通過構造函數Hero創建對象時
    * 不僅具有構造函數的自有屬性
    * 還具有構造函數的原型屬性
 */
var hero = new Hero("犬夜叉");

console.log(hero.name);// 犬夜叉
console.log(hero.age);// 16

var hero2 = new Hero("桔梗");
console.log(hero2.name);// 桔梗
console.log(hero2.age);// 16
// 為對象hero新增age屬性
// hero.age = 80;
// console.log(hero.age);// 80
//
// console.log(hero);
//
// console.log(hero2.age);// 16

Hero.prototype.age = 80;

console.log(hero.age);
console.log(hero2.age);

檢測自有或原型屬性

有兩種方式以hasOwnPrototype()來檢測對象是否指定自有屬性
以in關鍵字檢測對象及原型鏈是否有屬性

function Hero(){
    // this.name = "犬夜叉";// 自有屬性
}
// Hero.prototype.name = "桔梗";

var hero = new Hero();
/*
  Object.hasOwnProperty(prop)方法
  判斷當前指定屬性是否為自有屬性
  
  prop - 表示指定屬性名稱
  返回值 - 布爾值
  true - 表示存在指定的自有屬性
  false - 表示不存在指定的自有屬性
 */
// console.log(hero.hasOwnProperty("name"));// true
/*
  使用in關鍵字檢測對象的屬性
  作用 - 判斷對象中是否存在指定屬性(自有屬性或原型屬性)
  返回值 - 布爾值
  true - 表示存在指定的屬性
  false - 表示不存在指定的屬性
 */
console.log("name" in hero);

擴展屬性或方法

以原型設置指定構造函數和對象擴展其屬性和方法

Object.prototype.sayMe = function () {
    console.log("you my sayMe function")
}
var obj = new Object();

obj.sayMe();

Array.prototype.inArray = function (color) {

    for(var i = 0, len = this.length; i < len; i++){
        if(this[i] === color){
            return true;
        }
    }
    return false;
}
var arr = ["red", "green","blue"];
console.log(arr.inArray("yellow"));
console.log(arr.inArray("red"));

重寫原型屬性

將構造函數和對象，以自有屬性重寫遠得屬性

//定義構造函數
function Hero() {
    this.name = "犬夜叉"
}
Hero.prototype.name = "桔梗";
//構造函數原型
var hero = new Hero();
// 構造函數創建對象
console.log(hero.name);//犬夜叉
//自有屬性與原型屬性同名，默認訪問是自有屬性，自有屬性優先級別高于原型屬性
delete hero.name;
//刪除對象屬性
console.log(hero.name);//桔梗
//重新訪問對象屬性

isPrototypeOF()方法

//通過初始化方式定義對象
var obj = {
    name : "犬夜叉"
}
function Hero() {}
//定義構造函數
Hero.prototype = obj;
//將對象obj賦值給構造函數Hero原型
var hero = new Hero();
//通過構造函數創建對象
var result = obj.isPrototypeOf(hero);
//判斷指定對象是否是另一個對象原型
console.log(result);

3.擴展內建對象
內置對象的prototype屬性設置擴展屬性和方法

Object.prototype.sayMe = function () {
    console.log("you my sayMe function")
}
var obj = new Object();

obj.sayMe();

Array.prototype.inArray = function (color) {

    for(var i = 0, len = this.length; i < len; i++){
        if(this[i] === color){
            return true;
        }
    }
    return false;
}
var arr = ["red", "green","blue"];
console.log(arr.inArray("yellow"));
console.log(arr.inArray("red"));

GPU云服務器云服務器 javascript 面向對象 javascript面向對象 javascript面向對象編程 javascript面向對象編程指南

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

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

SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

李昌杰 2019-08-16 10:40 評論0 收藏0
SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

Lyux 2019-06-28 13:32 評論0 收藏0
SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

AaronYuan 2019-08-20 18:55 評論0 收藏0
面向對象的JavaScript之繼承(一) 類式繼承

摘要：那你們肯定會問為什么共用，而沒有共用呢，下面就給你解釋，請看引用類型是共用的值類型是私用的。引言面向對象的編程語言都具繼承這一機制,而 JavaScript 是基于原型(Prototype)面向對象程序設計,所以它的實現方式也是基于原型(Prototype)實現的. 繼承的方式類式繼承構造函數繼承組合繼承原型式繼承寄生式繼承寄生組合式繼承 1.類式繼承 //聲明父...

forsigner 2019-08-20 14:21 評論0 收藏0
javascript面向對象之“多態”

摘要：之前，本質上不能算是一門面向對象的編程語言，因為它對于封裝繼承多態這些面向對象語言的特點并沒有在語言層面上提供原生的支持。所以在中出現了等關鍵字，解決了面向對象中出現了問題。 ES6之前，javascript本質上不能算是一門面向對象的編程語言，因為它對于封裝、繼承、多態這些面向對象語言的特點并沒有在語言層面上提供原生的支持。但是，它引入了原型(prototype)的概念，可以讓我們以...

JerryWangSAP 2019-08-23 14:11 評論0 收藏0
面向對象的 JavaScript

摘要：是完全的面向對象語言，它們通過類的形式組織函數和變量，使之不能脫離對象存在。而在基于原型的面向對象方式中，對象則是依靠構造器利用原型構造出來的。 JavaScript 函數式腳本語言特性以及其看似隨意的編寫風格，導致長期以來人們對這一門語言的誤解，即認為 JavaScript 不是一門面向對象的語言，或者只是部分具備一些面向對象的特征。本文將回歸面向對象本意，從對語言感悟的角度闡述為什...

novo 2019-08-21 10:49 評論0 收藏0