您的位置:首页 > Web前端 > JavaScript

javascript之面向对象、构造函数

2017-05-09 16:09 232 查看
在微信公众号“前端大全”中看到了波同学的讲解面向对象、构造函数、原型与原型链等内容,之前对于这几个知识点有去理解与使用过,但大多是处于似懂非懂的阶段,会用而已。今天凑巧看到了波同学的讲解,就此记录。


对象的定义

无序属性的集合,其属性可以包含基本值,对象或者函数。在javascript中由一些列无序的key-value对组成

//对象
var person = {
name: 'Tom',//基本值
age: 18,
getName: function() {},//函数
parent: {}//对象
}
//创建对象
var obj=new Object();
var obj={};
//给创建的对象添加方法
var person={};
person.name="mon";
person.getName=function(){
return this.name;
}
var person={
name:"mon",
getName:function(){
return this.name;
}
}
//访问对象的属性和方法
person.name
person['name']
['name','age'].forEach(funciton(item){
console.log(person[item]);
})


工厂模式

提供一个模子,然后通过这个模子复制出我们需要的对象

var createPerson=function(name,age){
//声明一个中间对象,该对象就是工厂模式的模子
var o=new Object();
//依次添加我们需要的属性和方法
o.name=name;
o.age=age;

a931
o.getName=function(){
return this.name;
}
return o;
}
//创建两个实例
var perTom=createPerson('Tom',20);
var perJake=createPerson('Jake',22);
//识别对象实例的类型
var obj={};
var foo=function(){};
console.log(obj instanceof Object);//true
console.log(foo instanceof Function);//true


构造函数

1.与普通函数相比,构造函数并没有什么特别的地方,首字母大写只是约定的小规定,用于区分普通函数。

2.new 关键字让构造函数具有了与普通函数不同的许多特点,执行如下过程:

①声明一个中间对象

②将该中间对象的原型指向构造函数的原型

③将构造函数的this,指向该中间对象

④返回该中间对象,即返回实例对象

//创建构造函数
var Person=function(name,age){
this.name=name;
this.age=age;
this.getName=function(){
return this.name;
}
}
//将构造函数以参数形式传入
function New(func){
//声明一个中间对象,该对象为最终返回的实例
var res={};
if(func.prototype!==null){
//将实例的原型指向构造函数的原型
res._proto_=func.prototype;
}
//ret为构造函数执行的结果,通过apply,将构造函数内部的this指向修改为指向res,即为实例对象
var ret=func.apply(res,Array.prototype.slice.call(arguments,1));
//当我们在构造函数中明确指定了返回对象时,那么new的执行结果就是该返回对象
if((type ret==="object"||typeof ret==="function")&&ret !=null){
return ret;
}
//如果没有明确指定返回对象,则默认返回res,这个res就是实例对象
return res;
}
//通过new声明创建实例
var p1=New(Person,'tom',20);//p1实际接收的是new返回的res,等效于var p1=new Person('tom',20);
console.log(p1.getName());
console.log(p1 instanceof Person);//true
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐