繼承
1.原型對(duì)象鏈和 Object.prototype
hasOwnProperty() //檢查是否存在一個(gè)給定名字的自有屬性
propertyIsEnumerable() //檢查一個(gè)自有屬性是否可枚舉
isPrototypeOf() //檢查一個(gè)對(duì)象是否是另一個(gè)對(duì)象的原型對(duì)象
valueOf() //返回一個(gè)對(duì)象的表達(dá)式
toString() //返回一個(gè)對(duì)象的字符串表達(dá)
<script>
Object.prototype.add = function(value){
return this + value;
};
var book = {
title:"hello world"
};
console.log(book.add(5));
console.log("title".add("end"));
</script>
2.對(duì)象繼承(Object.create)
<script>
var person1 = {
name:"Anqi",
sayName:function(){
console.log(this.name);
}
};
var person2 = Object.create(person1,{
name:{
configurable:true,
enumerable:true,
value:"Hello",
writable:true
}
});
person1.sayName();
person2.sayName();
</script>
3.構(gòu)造函數(shù)的繼承(兩種方式)
<script>
function Rectangle(length,width){
this.length = length;
this.width = width;
}
Rectangle.prototype.getArea = function(){
return this.length * this.width;
};
Rectangle.prototype.toString = function(){
return "[Rectangle" + this.length + "x" + this.width + "]";
};
function Square(size){
this.length = size;
this.width = size;
}
// Square.prototype = new Rectangle();
// Square.prototype.constructor = Square;
// 上面這段注釋改寫(xiě)成下面這段
Square.prototype = Object.create(Rectangle.prototype,{
constructor:{
configurable:true,
enumerable:true,
value:Square,
writable:true
}
});
Square.prototype.toString = function(){
return "[Square" + this.length + "x" + this.width + "]";
};
var rect = new Rectangle(5,10);
var square = new Square(6);
console.log(rect.getArea());
console.log(square.getArea());
console.log(rect.toString());
console.log(square.toString());
</script>
【重要的兩段代碼】
Square.prototype = new Rectangle();
Square.prototype.constructor = Square;
Square.prototype = Object.create(Rectangle.prototype,{
constructor:{
configurable:true,
enumerable:true,
value:Square,
writable:true
}
});
3.構(gòu)造函數(shù)的竊取
用 call() 和 apply() 是構(gòu)造函數(shù)竊取的關(guān)鍵蚕泽。
<script>
function Rectangle(length,width){
this.length = length;
this.width = width;
}
Rectangle.prototype.getArea = function(){
return this.length * this.width;
};
Rectangle.prototype.toString = function(){
return "[Rectangle" + this.length + "x" + this.width + "]";
};
function Square(size){
Rectangle.call(this,size,size);
}
Square.prototype = Object.create(Rectangle.prototype,{
constructor:{
configurable:true,
enumerable:true,
value:Square,
writable:true
}
});
Square.prototype.toString = function(){
return "[Square" + this.length + "x" + this.width + "]";
};
var square = new Square(6);
console.log(square.length);
console.log(square.width);
console.log(square.getArea());
</script>
4.訪問(wèn)父類(lèi)方法
Square.prototype.toString = function(){
var text = Rectangle.prototype.toString.call(this);
return text.replace("Rectangle","Square");
};
該方法只需把 Square.prototype.toString 改成 Rectangle.prototype.toString 哄孤,這是唯一訪問(wèn)父類(lèi)的方法。
對(duì)象模式
1.模塊模式
模塊模式是一種用于創(chuàng)建擁有私有數(shù)據(jù)的單件對(duì)象的模式艰额。
<script>
var person =(function(){
var age=25;
return{
name:"Anqi",
getAge:function(){
return age;
},
setAge:function(value){
age=value
}
}
})();
person.setAge(20);
console.log(person.getAge())
</script>
以下是更改后的暴露模塊模式
<script>
var person = (function(){
/*私有*/
var age=25;
function getAge(){
return age;
}
function setAge(value){
age=value;
}
return{
/*共有的*/
name :"Anqi",
getAge:getAge,
setAge:setAge
}
})();
</script>
2.構(gòu)造函數(shù)的私有成員
在構(gòu)造函數(shù)中定義私有數(shù)據(jù)
<script>
/*在構(gòu)造函數(shù)中定義私有數(shù)據(jù)*/
function Person(name){
//私有
var age;
this.getAge = function(){
return age;
};
this.setAge = function(value){
age = value;
};
this.name=name;
}
var anqi = new Person("Anqi");
anqi.setAge(24);
console.log(anqi.getAge())
</script>
3.作用域安全的構(gòu)造函數(shù)
當(dāng)你不用 new 操作符直接調(diào)用來(lái)改變this的值床玻,會(huì)遇到錯(cuò)誤
<script>
function Person(name){
this.name = name;
}
Person.prototype.sayName=function(){
console.log(this.name)
};
var Anqi = Person("anqi");
console.log(Anqi instanceof Person); // false
console.log(typeof Anqi); // undefined
</script>
可以使用這種模式來(lái)根據(jù) new 的使用與否來(lái)控制函數(shù)的行為奋蔚。
function Person(name){
if(this instanceof Person){
this.name = name;
}else{
return new Person(name);
}
}