javascript笔记整理(对象遍历封装继承)
一、javascript对象遍历
1.javascript属性访问
对象.属性名
对象['属性名']
var obj={name:'chen',red:function(){ alert(1);return 2; }}; alert(obj['name']); alert(obj.name);
2.javascript属性遍历(for in)
//( obj[i] )此格式才有效
var obj={ name:'chen', red:function(){ alert(1); return 2; }, so:'rui' }; for(var i in obj){ alert(obj[i]); }
//arguments //检测参数个数:arguments.length //访问第i个值:arguments[i] function myArray () { var lengs= arguments.length; for (var i=0; i<lengs; i++) { this[i]=arguments[i]; } } var arr=new myArray('chen','20','suncco'); alert(arr[1]);
二、对象的特性之封装
把对象所有的组成部分组合起来,尽可能的隐藏对象的部分细节,使其受到保护;只保留有限的接口和外部发生联系。
//工厂函数 function app(name,size){ var apps={}; apps.name=name; apps.size=size; apps.lookName=function(){ return name; } apps.lookSize=function(){ return size; } return apps; } var arr=app('chen','20M'); alert(arr.lookName()); 结果:chen
//构造函数 function app(name,size){ this.name=name; this.size=size; this.lookName=function(){ return this.name; } this.lookSize=function(){ return this.size; } } var arr=new app('chen','20M'); alert(arr.name); 结果:chen alert(arr.lookName()); 结果:chen
构造函数跟工厂函数类似,构造函数比较正式;但里面的方法一样,占用了内存空间。
//原型:prototype方法 function app(name,size){ this.name=name; this.size=size; this.lookName=function(){ return this.name; } } app.prototype.lookSize=function(){ return this.name; } var arr=new app('chen','20M'); delete arr.size; alert(arr.size); 结果:undefined delete arr.lookSize; alert(arr.lookSize()); 结果:chen
prototype方法会使属性或方法一直存在代码段当中;但是不能实例化对象,只能实例化属性或对象!
//混合方法 function app(name,size){ this.name=name; this.size=size; this.lookName=function(){ return this.name; } //把prototype方法放到函数里头 app.prototype.lookSize=function(){ return this.name; } } var arr=new app('chen','20M'); delete arr.size; alert(arr.size);//undefined delete arr.lookSize; alert(arr.lookSize());//chen
javascript对象的继承和Object对象
一、Object对象(对象的一个类可以从现有的类中派生,并且拥有现有的类的方法或是属性,这和过程叫做继承。被继承的类叫做父类或是基类,继承的类叫做子类。(一个对象拥有另一个对象的属性和方法))
优点:
提高代码的重用性
提高代码的可维护性
提高代码的逻辑性
a.constructor——返回对创建此对象的数组函数的引用
//++++++ function app(name,size){ this.name=name; this.size=size; this.lookName=function(){ return this.name; } app.prototype.lookSize=function(){ return this.name; } } var arr=new app('chen','20M'); //+++++++ alert(arr.constructor); 结果:返回+号内的代码
b.Prototype 原型——对该函数对象的对象原型的引用。是函数对象的默认属性
var obj=new fun1(); function fun1 () { this.name="zhangsan"; } alert(obj.prototype); 结果:undefined alert(fun1.prototype); 结果:object
对象的共享属性存放到代码段当中。
可以实现继承
//hasOwnProperty(property) //判断一个对象是否有你给出名称的属性或对象 var obj=new fun1(); function fun1 () { this.name="zhangsan"; } alert(obj.hasOwnProperty("name")); 结果:true
//IsPrototypeOf(object) //判断该对象是否为另一个对象的原型(用来检测对象的类型) var arr=new Array(); var arc=new app(); function app(){ } alert(app.prototype.isPrototypeOf(arc)) 结果:true alert(app.prototype.isPrototypeOf(arr)) 结果:false
二、继承
//原型继承 function person(){ this.name="张三"; this.say=function () { alert(this.name) } } function student(){ } student.prototype=new person(); var zhangsan=new student(); zhangsan.say(); 结果:张三
//call方法 function person () { this.name="张三"; this.say=function () { alert(this.name) } } function student () { this.name="李四"; } var ren=new person (); var zhangsan=new student (); ren.say.call(zhangsan);
//apply方法,参数以数组形式 function person (name) { this.name=name; this.say=function () { alert(this.name) } } function student () { window.person.apply(this,["zhangsan"]) } var zhangsan=new student ();
前端切图小弟一枚,文中如果错误欢迎指出,小弟厦门工作,如有同行可以加个Q410232098,交流学习;
GitHub仓库地址:https://github.com/chenruifu/blog;欢迎给个Star
↓↓打个广告,个人运营的公众号:前端读者(fe_duzhe)
扫码关注,回复【前端视频】获取上百G前端教学视频