js面向对象2
来源:互联网 发布:win7未知网络错误 编辑:程序博客网 时间:2024/06/06 02:22
创建对象几种方法
1.基于obj创建对象
var obj=new Object; //创建了一个object对象 obj.name="校花"; //创建了一个name属性并赋值为校花; obj.ago=110; obj.info=function(){ //创建了一个info()方法(也可以看成一个匿名函数) console.log(this.name+this.ago) //this指向的就是obj对象 }; obj.info(); //调用方法(调用匿名函数)
缺点:创建类似的对象,要产生大量的代码;
2.采用对象字面量的方式;
var obj= { name: "校花", ago: 110, info: function (){ console.log(this.ago,this.ago); } }; obj.info();
3.工厂模式
//缺点:实例指向不明确 function abs(ago,name){ var obj={}; obj.ago=ago; obj.name=name; obj.info=function(){ console.log(this.ago,this.name); }; return obj; } var per=abs(120,"校花");//per 就是abs函数的实例 console.log(per.name);//校花 console.log(per instanceof abs); false console.log(per instanceof Object); true; instanceof 用来检测当前对象是否为某一类的实例 工厂模式要有返回值 return 木有new字符
4.构造函数模式
function abs(ago,name){ /* this=new Object();*/ this.ago=ago; this.name=name; this.info=function(){ console.log(this.ago,this.name); }; /* return this*/ } var per1=new abs(120,"嘿嘿"); console.log(per1.name);//this指向的是per1 var per=new abs(120,"校花");//per 就是abs函数的实例 per.info(); 构造函数和普通函数的不同处: 1。构造函数有new操作符; 2.木有return 返回值; 3.函数名首字母大写,书写规范; 4.this 指向的当前实例; 构造函数的缺点: 在创建多个实例时候,会重复调用new function创建多个实例;这些函数都不在同一个函数域里,会造成内存浪费; 会形成闭包,影响性能呢
关于this指向的几种情况
1.全局中调用
var box = 2;
alert(this.box); //全局,代表 window
2.函数调用
函数中的this也指向window对象
function greeting(){
this.name=”sheila”;
alert(“hello “+this.name);
}
greeting();//hello sheila
alert(window.name);//sheila
3.对象的方法调用
obj.fn();//obj对象的fn()方法中的this指向obj
4.调用构造函数
var dog=new Dog();//构造函数内的this指向新创建的实例对象
5.原型模式(利用构造函数的prototype属性)
我们创建的每个函数都有一个 prototype(原型)属性,这个属性是一个对象,它的用途是包含可以由特定类型的所有实例共享的属性和方法。
使用原型的好处可以让所有对象实例共享它所包含的属性和方法。也就是说,不必在构造函数中定义对象信息,而是可以直接将这些信息添加到原型中。具有共享性;
function abs(){ } //构造函数 abs.prototype.ago=110; //在原型添加属性 abs.prototype.name="嘿嘿"; abs.prototype.info=function(){ //在原型中添加方法(函数) console.log(this.ago,this.name) }; var per=new abs(); per.info() // var per={}; // per.__proto__===abs.prototype; // abs.call(per); // per.info //abs.prototype.info console.log(per.__proto__===abs.prototype);//构造函数的原型对象=实例的__proto__ true 缺点:1具有共享性,把原型对象里面的属性都会赋值给每个实例, 2.不能给原型对象的属性绑定参数
6.使用原型模式和构造函数相结合;
构造函数:加属性;
原型:函数(方法)
function Person(name,age){ this.name=name; this.age=age; this.family=['老爸','老妈']; } Person.prototype={ constructor:Person, info:function(){ console.log(this.family); } }; var per = new Person('花花',18); per.family.push('哥哥'); per.info();
继承:
1.现在让一个对象的原型等于另一个对象的实例,那么这个对象就继承了另一个对象的所有属性和方法,而这个对象的所有实例都共享这个对象的原型里面的所有属性及方法。
function Abs(name){ this.name=name; //父类 } Abs.prototype.info=function(){ console.log(this.name); //父类函数的原型对象 }; function X(ago){ //子类 this.ago=ago; } var per=new Abs("校花"); X.prototype=per; //将父类函数的实例赋值给子类函数的原型对象;子类函数就继承了父类函数的属性和方法 var per1= new X(21); //子类函数的实例 per1.info(); //实例调用函数;校花
2.构造继承
function Abs(name){ this.name=name; } Abs.prototype.info=function(){ console.log(this.name); }; function X(ago,name){ this.temp=Abs; //引入一个临时值用来保存Abs(将Abs保存在this.temp这个属性里面) this.temp(name);//调用属性 就继承在这个子类函数里面了; delete this.temp; this.ago=ago; } var per1= new X(21,'校花'); console.log(per1.name); //校花
3.apply 和call 方法;
function Abs(name){ this.name=name; } Abs.prototype.info=function(){ console.log(this.name); }; function X(ago,name){ Abs.call(this,name);//父类.call(this,父类的属性) this.ago=ago; } var per1= new X(21,'校花'); console.log(per1.name);
function Abs(name){ this.name=name; } Abs.prototype.info=function(){ console.log(this.name); }; function X(ago,name){ Abs.apply(this,[name]);//apply:父类的属性要用数组抱着 this指的是子类的实例 (this,arguments) 所有的参数 this.ago=ago; } var per1= new X(21,'校花'); console.log(per1.name);
延伸:
var arr=[1,2,3]; arr.push(3); console.log(arr); Array.prototype.push.apply(arr,[2,3]);//apply 数组 console.log(arr); Array.prototype.push.call(arr,2,3,4); //2,2,2 console.log(arr);
//让一个null有长度为10的特性 Array.apply(null,{length:10}).forEach(function(item,index){ console.log(index); });
- JS面向对象2
- js面向对象2
- JavaScript基础----40JS面向对象-JS面向对象(2)
- JS学习 面向对象 2
- js面向对象编程(2)继承
- js 面向对象学习2 类型转换
- JS面向对象2(继承)
- 面向对象的js(笔记2)
- js 面向对象组件开发参考2
- JS学习笔记2_面向对象
- js 面向对象编程 陷阱2
- js面向对象尝试
- js面向对象
- 面向对象的js
- js中的面向对象
- JS面向对象
- 06 JS面向对象
- JS 面向对象
- SQL语法大全
- 第4章 面向对象高级知识
- Spring AOP的三幅图
- SDUT-2677 4-1 复数类的运算符重载
- 反射与注解
- js面向对象2
- JAVA 垃圾回收分析与实战
- 池化技术(线程池、连接池、内存池等)
- 一步步手动实现热修复(一)-dex文件的生成与加载
- 阿里云Redis (Jedis连接篇)
- github设置添加SSH
- 冈萨雷斯数字图像处理学习4:频率域图像增强1
- 第八周项目二
- Mysql问题一则:Commands out of sync