繼承是什么?
在面向對象的思想中,廣義的繼承是子對象擁有父對象的一切方法與屬性。而JavaScript有著更特殊的原型繼承。
上次我們已經介紹了JavaScript中獨有的原型及其原型鏈這一概念,JS的原型繼承正式基于這兩者而實現的。那么什么是原型繼承呢?子對象能夠使用父原型對象中的一切方法屬性卻不占用自己的內存空間。一句話解釋:我是公共資源,能用卻不被擁有。
例如:學校需要錄入學校一年級男生的信息,樣本個例的差異僅僅是姓名,所以僅需為每個新對象添加一個姓名的屬性即可。但此時,粗心的管理員把這份信息表和女生的弄混了,然而每個對象并沒有性別這個屬性,如何做到呢?
function Person(name){
this.name = name;
}
Person.prototype.gender = "male";
Person.prototype.selfSay = function(){console.log("my name is " + this.name;)}
var p1 = new Person("xiaoming");
var p2 = new Person("xiaohua");
原型圖
我們創建了構造函數Person
,只有一個屬性name
。顯然,通過Person new
出來的對象p1,p2
都會擁有name
屬性。我們額外的為Person.prototype
這個原型對象,設置了gender:male
,以及方法selfSay
。p1,p2
本身并不具備gender
屬性和selfSay
方法,卻能調用它:
p1.gender; //male
p2.selfSay(); // my name is xiaohua
這種繼承方式最大的好處就是,設置公共資源,減少內存空間的占用。
有幾種常見創建對象的方式? 舉例說明?
- 直接創建
var xiaoming = {
name:"xiaoming",
age:18,
gender:"male"
};
var xiaomei = {
name:"xiaomei",
age:18,
gender:"female"
}
- 構造函數
function Person(name,age,gender){
this.name=name;
this.age=age;
this.gender = gender;
}
var xiaoming = new Person("xiaoming",18,"male");
var xiaomei = new Person("xiaomei",18,"female");
- 工廠模式
function factory(name,age,gender){
var obj=new Object();
obj.name=name;
obj.age=age;
obj.gender=gender;
return obj;
}
var xiaoming = factory("xiaoming",18,male);
var xiaomei = factory("xiaomei",18,female);
- 原型
function Person(name,gender){
this.name = name;
this.gender = gender;
}
Person.prototype.age = 18;
var xiaoming = new Person("xiaoming","male");
var xiaomei = new Person("xiaomei","female");
下面兩種寫法有什么區別?
//方法1
function People(name, sex){
this.name = name;
this.sex = sex;
this.printName = function(){
console.log(this.name);
}
}
var p1 = new People('饑人谷', 2)
//方法2
function Person(name, sex){
this.name = name;
this.sex = sex;
}
Person.prototype.printName = function(){
console.log(this.name);
}
var p1 = new Person('若愚', 27);
兩種方法的p1
對象均能使用,區別在于PrintName
這個方法存放在哪。方法一中,每個新創建的子對象都擁有方法PrintName
,而方法法二中子對象是不存儲PrintName
方法的,而是通過原型鏈調用該方法。
Object.create
有什么作用?兼容性如何?如何使用?
Object.create(proto [, propertiesObject ])
方法創建一個擁有指定原型和若干個指定屬性的對象。它是ES5的新方法(IE9以上支持)。
- 第一個參數為必選項,作為被拷貝的對象原型。
- 第二個參數為可選項,是新對象的屬性描述符,格式如下:
數據屬性
writable:是否可任意寫
configurable:是否能夠刪除,是否能夠被修改
enumerable:是否能用 for in 枚舉
value:值
訪問屬性:
get(): 訪問
set(): 設置
例:
var obj = {
a:function(){
console.log("I am a.")
},
b:function(){
console.log("I am b.")
}
}
var newObj = Object.create(obj,{
c:{
value:"CCCC",
writable:true
},
d:{
configurable: false,
get: function() { return d; },
set: function(value) { d=value }
}
});
console.log(newObj.a()); //I am a.
console.log(newObj.c); // CCCC
newObj.c = "DDDDD"
console.log(newObj.c); //DDDDD
newObj.d = 100;
console.log(newObj.d); //100
hasOwnProperty
有什么作用? 如何使用?
判斷一個屬性是否為該對象的自身屬性,如:
function People(name){
this.name = name;
}
var xiaoming = new People("xiaoming");
xiaoming.age = 18;
xiaoming.hasOwnProperty("name"); //false
xiaoming.hasOwnProperty("age") //true
實現Object.create
的 polyfill(基于hasOwnProperty
)
直接貼的MDN文檔,我按自己的意思來理解一下:
//當沒有這種方法時,創建該方法。
if(!Object.create){
Object.create = (function(){
//準備工作:1.建立一個臨時的空對象 ;2.提取hasOwnProperty方法
function Temp(){};
var hasOwn = Object.prototype.hasOwnProperty;
return function(o){
//先判斷傳進來的參數是否是一個單純的對象,例如函數就不是,所以函數應當傳遞Function.prototype;
if(typeof o != "object"){
throw TypeError("Object prototype may only be an Object or null");
}
//讓臨時對象的prototype指向傳入參數o這個原型對象,用Temp構造出對象obj,顯然obj此時沒有自有屬性。
Temp.prototype = o;
var obj = new Temp();
Temp.prototype = null;
//我們知道Object.create()是可以傳入兩個參數的,這里這種寫法不禁止你傳入多個參數,但是至多只有
//兩個有效參數,當傳入兩個或兩個以上參數時,只取第二個參數。按照Object.create()原格式,第二個
//參數應該是一個對象,對象里有各種屬性,所以在此遍歷所有屬性,并將其賦予obj;至此,obj已經完全
//復制了o對象,return即可;
if(arguments.length > 1){
var Properties = Object(arguments[1]);
for (var prop in Properties){
if(hasOwn.call(Properties,prop)){
obj[prop] = Properties[prop];
}
}
}
return obj;
}
})();
}
如下代碼中call的作用是什么?
function Person(name, sex){
this.name = name;
this.sex = sex;
}
function Male(name, sex, age){
Person.call(this, name, sex); //調用Person函數,同時將作用域由window變為this(調用Male函數的對象)
this.age = age;
}
補全代碼,實現繼承
function Person(name, sex){
this.name = name;
this.sex = sex;
}
Person.prototype.getName = function(){
console.log(this.name);
};
function Male(name, sex, age){
Person.call(this,name,sex)
this.age = age;
}
var obj = Object.create(Person.prototype);
Male.prototype = obj;
obj.constructor = Male;
Male.prototype.getAge = function(){
console.log(this.age);
};
var ruoyu = new Male('若愚', '男', 27);
ruoyu.getName();