物件導向 建立物件 原型鏈 繼承

2021-10-12 11:47:10 字數 4830 閱讀 7942

// 字面量建立物件: 使用json形式建立物件, 適用於建立單個物件.

// json: js物件表示法, 由鍵值對組成, 每乙個鍵值對之間使用冒號連線, 每一對鍵值對之間使用逗號隔開.

var obj =

};console.log(obj);

console.log(typeof obj); // object

console.log(obj.age);

console.log(obj['age']);

obj.sayhi();

// 例項建立物件, 使用 new object() 建立乙個例項物件, 再給該物件新增屬性和方法

var obj = new object(); // 建立乙個例項物件

console.log(obj);

obj.name = '狄仁傑'; // 給物件新增屬性

obj.age = 20;

console.log(obj);

// 給物件新增方法

obj.sayhi = function ()

console.log(obj);

// 工廠模式建立物件: 把建立物件以及給物件新增方法和屬性的過程封裝在函式中, 根據傳入的不同的引數返回不同的物件

// 工廠模式建立物件解決了重複例項化的過程, 無法分辨物件是哪個類的例項物件.

// instanceof運算子: 檢測乙個物件是否是某個建構函式的例項, 返回值是boolean.

function

createobject

(name, age)

// 返回物件

return obj;

}var obj1 =

createobject

('lilei',20

);var obj2 =

createobject

('hanmeimei',20

);console.

log(obj1, obj2)

;console.

log(obj1 instanceof

object);

// true

console.

log(obj2 instanceof

object);

// true

console.

log(obj2 instanceof

createobject);

// true

// 建構函式

// 1.建構函式首字母大寫(約定)

// 2.建構函式沒有顯式建立物件(沒有 new object())

// 3.直接把屬性和方法繫結給內部的this物件

// 4.沒有return語句,不用返回物件

// 5.建立物件時使用new運算子呼叫建構函式

// new的作用:

// 1.建立乙個新物件

// 2.把建構函式作用域賦值給新物件(把this繫結給新物件)

// 3.執行建構函式中的**(給物件新增屬性和方法)

// 4.返回新物件

function people (name, age)

}var obj = new people('lilei', 20);

console.log(obj); // people 

console.log(typeof obj); // object

console.log(obj.name);

obj.sayhi();

var obj1 = new people('hanmeimei',19);

obj1.sayhi();

function people () 

}var obj1 = new people();

console.log(obj1); // people {}

console.log(obj1.name); // lilei

console.log(obj1.age); // 20

console.log(obj1.sayhi); // f

var obj2 = new people();

console.log(obj2);

console.log(obj2.name); // lilei

console.log(obj2.age); // 20

console.log(obj2.sayhi); // f

// 混合模式建立物件(建構函式+原型): 把可變的屬性放在建構函式中, 把共有的方法寫在原型上

function

people

(name, age)

people.prototype.

sayhi

=function()

var lilei =

newpeople

('lilei',20

);var lucy =

newpeople

('lucy',20

);console.

log(lilei, lucy)

;// people people

lilei.

sayhi()

;lucy.

sayhi()

;console.

log(lilei.sayhi == lucy.sayhi)

;// true

// 動態混合模式建立物件

function people (name, age)

}}var lilei = new people('lilei', 20);

var lucy = new people('lucy', 20);

console.log(lilei, lucy); // people  people 

lilei.sayhi();

lucy.sayhi();

console.log(lilei.sayhi == lucy.sayhi); // true

function fun ()

fun(); // window

var obj =

fun.call(obj); // obj

function sum (a, b)

sum.call(obj, 10, 20);

// 每個物件都有自己的原型物件, 原型物件也有自己的原型物件, 組成了鏈式結構, 稱之為原型鏈.原型鏈的終點是object的原型, 再往上為null.

function people(name, age)

var xiaoming = new people('xiaoming', 7);

console.log(xiaoming.__proto__);

console.log(xiaoming.__proto__.__proto__);

console.log(xiaoming.__proto__.__proto__.constructor); // ƒ object()

console.log(xiaoming.__proto__.__proto__.__proto__); // null

// 原型鏈繼承: 將父類的例項化物件賦值給子類的原型.

function people (name, age)

function student (name, age)

// 繼承的核心語句: 將父類的例項化物件賦值給子類的原型.

student.prototype = new people();

// 給父類新增方法

people.prototype.hi = function ()

// 給子類新增方法

student.prototype.study = function ()

var xiaoming = new student('xiaoming', 7);

console.log(xiaoming); // 08-原型鏈繼承.html:33 student 

console.log(xiaoming.name);

console.log(xiaoming.age);

xiaoming.study(); // 物件xiaoming沒有study方法,可以在xiaoming的__proto__上找到

xiaoming.hi(); // 物件xiaoming沒有hi方法,可以在xiaoming的__proto__的__proto__上找到

function

people

(name, age)

}function

student

(name, age)

people.prototype.

run=

function()

student.prototype.

study

=function()

var xiaoming =

newstudent

('xiaoming',20

);console.

log(xiaoming)

;console.

log(xiaoming.name)

;console.

log(xiaoming.age)

;xiaoming.hi(

);xiaoming.

study()

;xiaoming.

run();

// uncaught typeerror: xiaoming.run is not a function

物件導向 prototype 原型鏈 繼承

物件導向 oop,即 object oriented 是相對於面向過程來講的,簡單說就是把資料和方法組合封裝起來成為乙個整體,提高軟體的重用性 靈活性和擴充套件性。物件導向特點 當建立的物件較多時,會有可共用的屬性,此時就可用prototype。比如我們用array來建立乙個例項時,不用我們定義,它...

JS 物件導向之繼承 原型鏈

繼承是oo語言中乙個重要的特性和概念。許多的oo語言中都支援兩種繼承方式 介面繼承和實現繼承。ecmascript只支援實現繼承,其實現繼承主要是靠原型鏈來實現。在php語言中,是使用extend來實現繼承。那麼我們就先來講講原型鏈。原型鏈的基本思想是利用原型讓乙個引用型別繼承另乙個引用型別的屬性和...

物件導向 原型 繼承

繼承 聖杯模式 prototype constructor prpto 三者之間關係 typeof 區分陣列與物件 instanceof object.create 類陣列好玩的 1.字串函式擴充套件 一般呼叫 string.prototype.repeat function num console...