对象的创建模式
Object构造函数模式var obj = {};
obj.name = 'Tom'
obj.setName = function(name){this.name=name}
对象字面量模式var obj = {
name : 'Tom',
setName : function(name){this.name = name}
}
构造函数模式function Person(name, age) {
this.name = name;
this.age = age;
this.setName = function(name){this.name=name;};
}
new Person('tom', 12);
构造函数+原型的组合模式function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.setName = function(name){this.name=name;};
new Person('tom', 12);
继承模式
原型链继承 : 得到方法function Parent(){}
Parent.prototype.test = function(){};
function Child(){}
Child.prototype = new Parent(); // 子类型的原型指向父类型实例
Child.prototype.constructor = Child
var child = new Child(); //有test()
借用构造函数 : 得到属性function Parent(xxx){this.xxx = xxx}
Parent.prototype.test = function(){};
function Child(xxx,yyy){
Parent.call(this, xxx);//借用构造函数 this.Parent(xxx)
}
var child = new Child('a', 'b'); //child.xxx为'a', 但child没有test()
组合function Parent(xxx){this.xxx = xxx}
Parent.prototype.test = function(){};
function Child(xxx,yyy){
Parent.call(this, xxx);//借用构造函数 this.Parent(xxx)
}
Child.prototype = new Parent(); //得到test()
var child = new Child(); //child.xxx为'a', 也有test()
new一个对象背后做了些什么?
创建一个空对象 给对象设置__proto__, 值为构造函数对象的prototype属性值 this.proto = Fn.prototype 执行构造函数体(给对象添加属性/方法)
详细介绍
Object构造函数模式
< ! --
方式一 : Object构造函数模式
* 套路: 先创建空Object对象, 再动态添加属性/ 方法
* 适用场景: 起始时不确定对象内部数据
* 问题: 语句太多
-- >
< script type= "text/javascript" >
var p = new Object ( )
p = { }
p. name = 'Tom'
p. age = 12
p. setName = function ( name ) {
this . name = name
}
console. log ( p. name, p. age)
p. setName ( 'Bob' )
console. log ( p. name, p. age)
< / script>
对象字面量
< ! --
方式二 : 对象字面量模式
* 套路: 使用{ } 创建对象, 同时指定属性/ 方法
* 适用场景: 起始时对象内部数据是确定的
* 问题: 如果创建多个对象, 有重复代码
-- >
< script type= "text/javascript" >
var p = {
name : 'Tom' ,
age : 12 ,
setName : function ( name ) {
this . name = name
}
}
console. log ( p. name, p. age)
p. setName ( 'JACK' )
console. log ( p. name, p. age)
var p2 = {
name : 'Bob' ,
age : 13 ,
setName : function ( name ) {
this . name = name
}
}
< / script>
工厂模式
< ! --
方式三 : 工厂模式
* 套路: 通过工厂函数动态创建对象并返回
* 适用场景: 需要创建多个对象
* 问题: 对象没有一个具体的类型, 都是Object类型
-- >
< script type= "text/javascript" >
function createPerson ( name, age ) {
var obj = {
name : name,
age : age,
setName : function ( name ) {
this . name = name
}
}
return obj
}
var p1 = createPerson ( 'Tom' , 12 )
var p2 = createPerson ( 'Bob' , 13 )
function createStudent ( name, price ) {
var obj = {
name : name,
price : price
}
return obj
}
var s = createStudent ( '张三' , 12000 )
< / script>
自定义构造函数模式
< ! --
方式四 : 自定义构造函数模式
* 套路: 自定义构造函数, 通过new 创建对象
* 适用场景: 需要创建多个类型确定的对象
* 问题: 每个对象都有相同的数据, 浪费内存
-- >
< script type= "text/javascript" >
function Person ( name, age ) {
this . name = name
this . age = age
this . setName = function ( name ) {
this . name = name
}
}
var p1 = new Person ( 'Tom' , 12 )
p1. setName ( 'Jack' )
console. log ( p1. name, p1. age)
console. log ( p1 instanceof Person )
function Student ( name, price ) {
this . name = name
this . price = price
}
var s = new Student ( 'Bob' , 13000 )
console. log ( s instanceof Student )
var p2 = new Person ( 'JACK' , 23 )
console. log ( p1, p2)
< / script>
构造函数+原型的组合模式
< ! --
方式六 : 构造函数+ 原型的组合模式
* 套路: 自定义构造函数, 属性在函数中初始化, 方法添加到原型上
* 适用场景: 需要创建多个类型确定的对象
-- >
< script type= "text/javascript" >
function Person ( name, age ) {
this . name = name
this . age = age
}
Person . prototype. setName = function ( name ) {
this . name = name
}
var p1 = new Person ( 'Tom' , 23 )
var p2 = new Person ( 'Jack' , 24 )
console. log ( p1, p2)
< / script>
继承模式–原型链继承
< ! --
方式1 : 原型链继承
1. 套路
1. 定义父类型构造函数
2. 给父类型的原型添加方法
3. 定义子类型的构造函数
4. 创建父类型的对象赋值给子类型的原型
5. 将子类型原型的构造属性设置为子类型
6. 给子类型原型添加方法
7. 创建子类型的对象 : 可以调用父类型的方法
2. 关键
1. 子类型的原型为父类型的一个实例对象
-- >
< script type= "text/javascript" >
function Supper ( ) {
this . supProp = 'Supper property'
}
Supper . prototype. showSupperProp = function ( ) {
console. log ( this . supProp)
}
function Sub ( ) {
this . subProp = 'Sub property'
}
Sub . prototype = new Supper ( )
Sub . prototype. constructor = Sub
Sub . prototype. showSubProp = function ( ) {
console. log ( this . subProp)
}
var sub = new Sub ( )
sub. showSupperProp ( )
sub. showSubProp ( )
console. log ( sub)
< / script>
继承模式–借用构造函数继承
< ! --
方式2 : 借用构造函数继承 ( 假的)
1. 套路 :
1. 定义父类型构造函数
2. 定义子类型构造函数
3. 在子类型构造函数中调用父类型构造
2. 关键 :
1. 在子类型构造函数中通用call ( ) 调用父类型构造函数
-- >
< script type= "text/javascript" >
function Person ( name, age ) {
this . name = name
this . age = age
}
function Student ( name, age, price ) {
Person . call ( this , name, age)
this . price = price
}
var s = new Student ( 'Tom' , 20 , 14000 )
console. log ( s. name, s. age, s. price)
< / script>
继承模式–组合继承
< ! --
方式3 : 原型链+ 借用构造函数的组合继承
1. 利用原型链实现对父类型对象的方法继承
2. 利用super ( ) 借用父类型构建函数初始化相同属性
-- >
< script type= "text/javascript" >
function Person ( name, age ) {
this . name = name
this . age = age
}
Person . prototype. setName = function ( name ) {
this . name = name
}
function Student ( name, age, price ) {
Person . call ( this , name, age)
this . price = price
}
Student . prototype = new Person ( )
Student . prototype. constructor = Student
Student . prototype. setPrice = function ( price ) {
this . price = price
}
var s = new Student ( 'Tom' , 24 , 15000 )
s. setName ( 'Bob' )
s. setPrice ( 16000 )
console. log ( s. name, s. age, s. price)
< / script>