javascript 對象、屬性、原型、原型鏈、new、constructor

PiscesYE 發布于2019-08-21 11:19 / 2283人閱讀

摘要：由于屬性是可以變更的，所以未必真的指向對象的構造函數，只是一個提示。不過，從編程習慣上，我們應該盡量讓對象的指向其構造函數，以維持這個慣例。

對象

在javascript中經常聽到一句話叫做一切事物皆對象。
其實得除null和undefined除外數字也有點特殊看栗子

false.toString();//"false"
[1,2,3].toString();//"1,2,3"

//數字
(1).toString();//"1"
1 .toString();// "1"
1..toString();// "1"
1.toString();//Unexpected token ILLEGAL
//null undefined
null.toString();//Cannot call method "toString" of null
undefined.toString();//Cannot call method "toString" of undefined

數字應該是js引擎解析出錯
這里特別注意的是對象也分為普通對象和函數對象，函數對象就是通過new Function創建的對象普通對象就是Object后面講到原型時會用到。

屬性

var text1={};
var text2={name:"xx",age:"3"}
//屬性的訪問
text2.name//xx
text2[name]//undefined
text2["name"]//xx

對象屬性的刪除只有delete,去設置它的值為null、和undefined 只是制空方便gc回收屬性仍然存在。

var text={name:"xx",age:"3",say:"hello"}
text.name=null;
text.age=undefined;
delete text.say;
text;//{name:null,age:undefined}

原型

概念：每當定義個個對象的時候，對象中會包含一些預定義的屬性。其中函數對象的一個屬性就叫原型對象prototype。
普通對象是沒有prototyoe的，但有__proto__屬性。
作用：原型對象就是用來做繼承用的。
栗子：

var person=function(name){
    this.name=name;
}
person.prototype.getName=function(){
    return this.name;
}
var xx=new person("我叫xx");
xx.getName();//通過原型的屬性繼承了getName方法

至于怎么實現的就得說到原型鏈了。

原型鏈

概念：JS在創建對象的時候不管是普通對象還是原型對象都有一個叫做__proto__的屬性，他用于指向那個創建它的對象的原型prototype。然而創建他的對象也有_proto_這個屬性，同樣又指向上一層，直到 __proto__這個屬性為null為止，這樣形成的一條鏈狀就叫原型鏈。

new

function person(){
}
var p=new person();
alert(p.__proto__===person.prototype);//true

new的作用：

var p={};//聲明個空對象

p.__proto__=person.prototype;//把P__proto__的屬性指向person的原型

person.call(p);//把this的指針指向p

constructor

概念：constructor這個屬性不會影響內部的任何屬性。
只是JavaScript語言設計的歷史遺留物。由于constructor屬性是可以變更的，所以未必真的指向對象的構造函數，只是一個提示。不過，從編程習慣上，我們應該盡量讓對象的constructor指向其構造函數，以維持這個慣例。
總結下：說白了一個并沒什么太大用的東西！y很不靠譜！很費操作！
理由看栗子1：

//定義構造函數
function person(name){
    this.name=name;
}
//給他原型上添加個方法
person.prototype.say=function(){
    console.log(this.name);
}
//測試下
var p=new person("xx");
alert(p.constructor)

這個栗子沒毛病他指向了構造函數。
然后看栗子2：

//定義構造函數
function person(name){
    this.name=name;
}
//給他原型上添加個方法
person.prototype={
    say:function(){
    console.log(this.name)
    }

}
//測試下
var p=new person("xx");
alert(p.constructor)

看吧很不靠譜除非你在去手動的改它的值

hasOwnProperty

來源：它就是通過原型鏈從Object.prototype那繼承過來的。
作用：用來判斷一個對象是否包含自定義屬性而不是原型鏈上的屬性
上栗子：

Object.prototype.one=1;//先定義一個原型屬性one
var text={two:2,three:3};//那么所有的普通對象都繼承one
console.log(text.one);//1
"one" in text;//true 他去找原型鏈上的屬性去了
text.hasOwnProperty("one");//false
text.hasOwnProperty("two");//true
text.hasOwnProperty("three");//true

云服務器 GPU云服務器原型原型鏈 js原型屬性有什么用原型鏈 javascript原型

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

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

JavaScript進階 - 1. 原型和原型鏈的概念

摘要：對應的關系圖如下講解了構造函數和原型對象之間的關系，那么實例對象和原型對象之間的關系又是怎么樣的呢下面講解。原型對象的指向的是構造函數和本身沒有屬性，但是其原型對象有該屬性，因此也能獲取到構造函數。 JavaScript進階 - 1. 原型和原型鏈的概念我們好多經常會被問道JavaScript原型和原型鏈的概念，還有關于繼承，new操作符相關的概念。本文就專門整理了原型和原型鏈的概念...

elisa.yang 2019-08-23 18:33 評論0 收藏0
關于javascript的原型和原型鏈，看我就夠了（二）

摘要：原文鏈接關于的原型和原型鏈，看我就夠了一參考鏈接闖關記之原型及原型鏈之原型與原型鏈一篇文章帶你理解原型和原型鏈徹底理解原型鏈一的默認指向圖解和的三角關系原型和原型鏈三張圖搞懂的原型對象與原型鏈溫故創建對象的三種方式通過對象直接量通過new創建對象通過Object.create() js中對象分為兩種函數對象普通對象仔細觀察如下代碼 function Foo(na...

eccozhou 2019-08-23 12:44 評論0 收藏0
JavaScript原型與原型鏈

摘要：每個原型對象都有一個屬性指向關聯的構造函數為了驗證這一說話，舉個例子。本文共 1475 字，讀完只需 6 分鐘一、概述在 JavaScript 中，是一種面向對象的程序設計語言，但是 JS 本身是沒有類的概念，JS 是靠原型和原型鏈實現對象屬性的繼承。在理解原型前，需要先知道對象的構造函數是什么，構造函數都有什么特點？ 1. 構造函數 // 構造函數 Person() ...

liaosilzu2007 2019-08-23 12:24 評論0 收藏0
深入學習js之——原型和原型鏈

摘要：我們用一張圖表示構造函數和實例原型之間的關系好了構造函數和實例原型之間的關系我們已經梳理清楚了，那我們怎么表示實例與實例原型，也就是或者和之間的關系呢。開篇：在Brendan Eich大神為JavaScript設計面向對象系統的時候，借鑒了Self 和Smalltalk這兩門基于原型的語言，之所以選擇基于原型的面向對象系統，并不是因為時間匆忙，它設計起來相對簡單，而是因為從一開始B...

FingerLiu 2019-08-23 15:25 評論0 收藏0
深入學習js之——原型和原型鏈

摘要：我們用一張圖表示構造函數和實例原型之間的關系好了構造函數和實例原型之間的關系我們已經梳理清楚了，那我們怎么表示實例與實例原型，也就是或者和之間的關系呢。開篇：在Brendan Eich大神為JavaScript設計面向對象系統的時候，借鑒了Self 和Smalltalk這兩門基于原型的語言，之所以選擇基于原型的面向對象系統，并不是因為時間匆忙，它設計起來相對簡單，而是因為從一開始B...

xialong 2019-08-23 15:04 評論0 收藏0