目錄

原型

原型鏈

---

原型

原型：
1.定義：原型是function對象的一個屬性，它定義了構造函數制造出的對象的公共祖先。通過該構造函數產生的對象，可以繼承該原型的屬性和方法。原型也是對象。
2.利用原型特點和概念，可以提供共有屬性。
3.對象如何查看原型-->隱式屬性__proto__
4.對象如何查看對象的構造函數-->constructor

原型是在構造函數時就生成的，剛開始原型為空值

function Person() {

}
var person = new Person();
var person1 = new Person();
構造函數必須是大駝峰式命名
Person.prototype --原型
Person.prototype = {} 是祖先
? ? Person.prototype.name = "";
? ? function Person() {

? ? }
? ? var person = new Person();
? ? var person1 = new Person(); ? ? ? person和person1都可訪問name屬性
? ? 當在控制臺查看時，只有輸入Person.name才能查看到屬性，所以說定義了構造函數祖先
? ? 如果構造函數中有聲明對象，那就取構造函數中的屬性值，如果沒有再向祖先找

Car.prototype.height = 1400;
Car.prototype.lang = 4900;
Car.prototype.carName = 'BMW';
function Car(color, owner) {
? ? this.owner = owner;
? ? this.color = color;
}
var car = new Car('red','jjj')
可以把共有的東西放到原型里，可以繼承
Car.prototype = {
? ? height = ;
? ? lang = ;
? ? carName = ;
}
這樣寫原型也是可以的

原型的增刪改查：
? ? Person.prototype.lastName = "Deng";
? ? function Person(name) {
? ? ? ? this.name = name;
? ? }
? ? var person = new Person('xuming');
? ? 想要修改lastName必須通過原型來修改，Person.prototype.lastName = ""來修改
? ? 如果直接在構造函數Person.lastName來修改，只是在構造函數中增加一個lastName屬性
? ? 通過對象來修改原型屬性是不可能的

? ? 刪除：原型不能刪除,但是在控制臺是可以執行刪除的，它會在構造函數的對象中找

constructor：
constructor是系統自帶的屬性
? ? function Car() {

? ? }
? ? var car = new Car();
? ? 當car想查找自己被那個構造函數構造出來的時候可以使用
? ? car.constructor
? ? 系統返回值：function Car() {

? ? }
? ??
? ? car.constructor可以手動更改
? ? ? ? function Person() {

? ? ? ? }
? ? ? ? car.prototype = {
? ? ? ? ? ? constructor = Person;
? ? ? ? }
? ? ? ? function Car() {

? ? ? ? }
? ? ? ? var car = new Car();
? ? 在查看car.constructor時系統顯示
? ? function Person() {
? ? ? ??
? ? }

隱式屬性__proto__：里面放原型
? ? Person.prototype.name = 'abc';
? ? function Person() {
? ? ? ? //var this = {
? ? ? ? // ?__proto__:Person.prototype
? ? ? ? //}
? ? }
? ? var obj = {
? ? ? ? name : 'sunny'
? ? }
? ? var person = new Person();
? ? 每個對象都有一個proto屬性指向原型，可以被修改
? ? ? ? person.__proto__ = obj;

原型鏈

原型鏈：
? ? 如何構造原型鏈
? ? 原型鏈上屬性的增刪改查
? ? 絕大多數對象的最終都會繼承自Object.prototype
? ? Object.create(原型)

Grand.prototype.lastName = "Deng"
function Grand() {

}
var grand = new Grand();
Fater.prototype = grand;
function Fater() {
? ? this.name = 'xuming';
}
var father = new Fater();
Son.prototype = father;
function Son() {
? ? this.hobbit = 'smoke';
}
var son = new Son();
查找Son中的屬性時，會依次向上查找，這就是原型鏈
增刪改查：都是只有本人可以增刪改查，子原型無法更改

Object.create也可以創建對象
? ? //var obj = Object.create(原型)
? ? var obj = {name:'a'};
? ? var obj1 = Object.create(obj);

判斷：所有的對象都會最終繼承自Object,prototype
錯，不是所有的對象都是繼承與它，比如Object.create
利用Object.create（）構造出的對象沒有原型

JavaScript會存在精度不準的情況，小數*整數=會存在精度不準
? ? 0.14*100=14.0000000002
可正常計算的范圍：小數點前16位到小數點后16位

Math.ceil():向上取整
Math.floor():向下取整
? ? Math.ceil(123.123) ?-->124
? ? Math.floor(123.999) -->123
Math.random():取隨機數

call/apply
? ? 作用，改變this指向
? ? 區別，后面傳的參數形式不同
任何一個方法都可以.call
? ? function test(){}
? ? //test() == test.call

? ? function Person(name,age) {
? ? ? ? //this == obj
? ? ? ? this.name = name;
? ? ? ? this.age = age;
? ? }
? ? var person = new Person('deng',100)
? ? var obj = {

? ? }
? ? Person.call(obj,'cheng',300);
call(),第一個參數會改變this指向，后面的參數以實參的形式傳入,但后面傳入的參數會以第一個參數代替this

call實際應用：
一：
? ? function Person(name,age,sex) {
? ? ? ? this.name = name;
? ? ? ? this.age = age;
? ? ? ? this.sex = sex;
? ? }
? ? function Student(name,age,sex,tel,grade) {
? ? ? ? //var this = {name:"",age:"",sex:""}
? ? ? ? Person.call(this,name,age,sex);
? ? ? ? this.tel = tel;
? ? ? ? this.grade = grade;
? ? }
? ? var student = new Student('sunny',123,'male',139,2020);

二：
? ? function Wheel(wheelSize,style) {
? ? ? ? this.style = style;
? ? ? ? this.wheelSize = wheelSize;
? ? }
? ? function Sit(c,sitColor) {
? ? ? ? this.c = c;
? ? ? ? this.sitColor = sitColor;
? ? }
? ? function Model(height,width,len) {
? ? ? ? this.height = height;
? ? ? ? this.width = width;
? ? ? ? this.len = len;
? ? }
? ? function Car(wheelSize,style,c,sitColor,height,width,len) {
? ? ? ? Wheel.call(this,wheelSize,style);
? ? ? ? Sit.call(this,c,sitColor);
? ? ? ? Model.call(this,height,width,len);
? ? }
? ? var car = new Car(100,'sdf,'真皮','red',1800,1900,4900);

apply:跟call作用基本一樣，區別：傳參列表不一樣，apply后只能傳一個數組
call需要把實參按照形參的個數傳進去
apply需要傳一個arguments
? ? function Wheel(wheelSize,style) {
? ? ? ? this.style = style;
? ? ? ? this.wheelSize = wheelSize;
? ? }
? ? function Sit(c,sitColor) {
? ? ? ? this.c = c;
? ? ? ? this.sitColor = sitColor;
? ? }
? ? function Model(height,width,len) {
? ? ? ? this.height = height;
? ? ? ? this.width = width;
? ? ? ? this.len = len;
? ? }
? ? function Car(wheelSize,style,c,sitColor,height,width,len) {
? ? ? ? Wheel.apply(this,[wheelSize,style]);
? ? ? ? Sit.apply(this,[c,sitColor]);
? ? ? ? Model.apply(this,[height,width,len]);
? ? }
? ? var car = new Car(100,'sdf,'真皮','red',1800,1900,4900);

eg:
? ? 1.JavaScript的call和apply方法是做什么的，兩者有什么區別?
? ? 改變this指向，傳參類型不同

總結

以上是生活随笔為你收集整理的JS原型、原型链的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。