JS面向对象的几种写法
JS 中,面向对象有几种写法。归纳下,大概有下面这几种:工厂模式,构造函数模式,原型模式,构造函数与原型模式的混合使用,原型链继承,借用构造函数继承。
一、工厂模式
function person (name,age,job){
var o={};//定义o这个对象
o.name=name;
o.age=age;
o.job=job;
o.sayName=function(){
console.log(this.name);
}
return o;
}
var demo=person('tj',22,'fe');
console.log(demo);
闭包使用的原理与之很相似,最后返回的
二、构造函数模式
构造函数本身也是函数,只不过是一个创建对象的函数
function Person(name,age){ //构造函数以大写字母开头,普通函数以小写字母开头
this.name=name;
this.age=age;
this.sayName=function(){
console.log(this.name)
};
}
var demo2=new Person('tj2',23)
console.log(demo2)
}
使用构造函数有一些注意点:必须使用new操作符,调用构造函数会经历以下四步:
1、创建一个新的对象
2、将构造函数的作用域给了新对象(this指向新对象),其中this 是全局变量,window.age 获取的结果是一样的。
3、对新对象添加属性
4、返回新对象
三、原型模式
每个函数都有一个prototype属性,这个属性是一直指针,指向一个对象,这个对象的用途是包含可以由特定类型的实例共享的属性和方法。
使用原型对象的好处是可以让所有对象实例共享他所包含的属性和方法。不必在构造函数中定义对象实例的信息,而是可以将这些信息直接添加到原型对象中。
function Person(){ }
Person.prototype.name ='tj3';
Person.prototype.age=24;
Person.prototype.sayName= function(){
alert(this.name)
}
var demo3= new Person();
console.log(demo3);
//更简单的原型办法
function Person(){
}
Person.prototype={
name:'tj4',
age:25,
sayName:function(){
alert(this.name)
}
};
var demo4=new Person();
console.log(demo4);
四、组合使用构造函数和原型模式
构造函数模式用于定义实例属性,而原型模式定义方法和共享的属性。这种混合模式还支持向构造函数传递参数。
function Person(name,age,job){
this.name=name;
this.age=age;
this.job=job;
this.sayName=function(){
alert(this.name)
}
}
Person.prototype ={
sayJob:function(){
console.log(this.job);
}
}
var person1=new Person('tj',22,'fe');
五、原型链继承
原型链继承的主要思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。
注意点:通过原型链继承是不能使用对象字面量创建原型方法,这样会重写原型链!
function SuperType(){
this.color=['red','blue'];
}
function SubType(){
}
SubType.prototype=new SuperType();//继承了SuperType
var instance1=new SubType();
console.log(instance1);
六、借用构造函数继承
其实就是用call和apply实现继承
function wanda(){
this.money=[1,2,3]
}
function sicong(){
wanda.call(this);
}
var sc = new sicong();
sc.money.push(666)
console.log(sc)
七、组合继承
将原型链和借用构造函数的技术组合起来一起用,好处是既能实现函数的复用,又能保证每个实例有自己的属性。
function SuperType(name) {
this.name = name;
this.color = ['red', 'blue'];
}
SuperType.prototype.sayName = function() {
console.log(this.name);
};
function SubType(name, age) {
SuperType.call(this, name);//继承属性
this.age = age;
}
SubType.prototype = new SuperType();//继承方法
var instance1 = new SubType('tj', 22);
instance1.sayName();
JS面向对象的几种写法的更多相关文章
- [JS] 面向对象的5种写法和拓展JS对象的写法
面向对象的JAVA 最开始当然是对象的定义了 收集了以下的五种写法 //第1种写法 function Circle(r) { this.r = r; } Circle.PI = 3.14159; C ...
- js面向对象的五种写法
第一种: //第1种写法 function Circle(r) { this.r = r; } Circle.PI = 3.14159; Circle.prototype.area = functio ...
- javascript中面向对象的5种写法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js面向对象初步探究(上) js面向对象的5种写方法
非常长一段时间看网上大神的JS代码特别吃力.那种面向对象的写法方式让人看得云里来雾里去.于是就研究了一下JS面向对象.因为是初学,就将自己在网上找到的资料整理一下,作为记忆. js面向对象的5种写方法 ...
- JS 中面向对象的5种写法
//第1种写法 function Circle(r) { this.r = r; } Circle.PI = 3.14159; Circle.prototype.area = function() { ...
- 归纳下js面向对象的几种常见写法
//定义Circle类,拥有成员变量r,常量PI和计算面积的成员函数area() 1.工厂方式 var Circle = function() { var obj = new Object(); ob ...
- js面向对象的几种常见写法
下面是一个简单的js对象:定义Circle类,拥有成员变量r,常量PI和计算面积的成员函数area(),常用为第一种和第三种. 1.工厂方式 var Circle = function() { var ...
- (转载)无缝滚动图片的js和jquery两种写法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js类的几种写法
我们常用的有以下几种方法来用JavaScript写一个“类”: 1. 构造函数(public属性和方法) 1: function Person(iName, iAge){ 2: this.name=i ...
随机推荐
- Python数据结构与算法--List和Dictionaries
Lists 当实现 list 的数据结构的时候Python 的设计者有很多的选择. 每一个选择都有可能影响着 list 操作执行的快慢. 当然他们也试图优化一些不常见的操作. 但是当权衡的时候,它们还 ...
- Struts2(十二)使用验证框架验证数据较验
一.数据验证 1.1.为什么要进行数据验证 对数据的合法性进行检查,只允许合法的数据进入应用程序 1.2.在哪里实现数据验证 客户端验证: 数据提交前在客户端验证 可使用JavaScript或者JQu ...
- iOS 公司开发者账号申请
苹果开发者账号分三种. 个人账号:个人申请用于开发苹果app所使用的账号,仅限于个人使用,申请比较容易,$99. 公司账号:以公司的名义申请的开发者账号,用于公司内部的开发者共用,$99. 企业账号: ...
- 20个简化开发任务的 JavaScript库
所谓JavaScript库就是预先写好的可以简化基于JavaScript的应用程序开发的,尤其是Ajax和其它以web为中心的技术的 JavaScript代码集.JavaScript主要用于写内嵌于H ...
- JS中的event 对象详解
JS中的event 对象详解 JS的event对象 Event属性和方法:1. type:事件的类型,如onlick中的click:2. srcElement/target:事件源,就是发生事件的 ...
- 如何在Java Filter 中注入 Service
在项目中遇到一个问题,在 Filter中注入 Serivce失败,注入的service始终为null.如下所示: public class WeiXinFilter implements Filter ...
- CentOS6.3下安装VSFTP服务
CentOS下安装FTP服务器: 第一步,检查服务器端是否已经安装FTP:[root@localhost centos]# rpm -q vsftpd 如果出现的是:[root@localhost c ...
- Android中解析XML
XML在各种开发中都广泛应用,Android也不例外.作为承载数据的一个重要角色,如何读写XML成为Android开发中一项重要的技能.今天就由我向大家介绍一下在Android平台下几种常见的XML解 ...
- CGI(通用网关接口)
公共网关接口 CGI(Common Gateway Interface) 是WWW技术中最重要的技术之一,有着不可替代的重要地位.CGI是外部应用程序(CGI程序)与Web服务器之间的接口标准,是在C ...
- ubuntu更新删除旧内核的shell脚本
ubuntu经常提示要更新内核,更新几次后 /boot目录就满了,再更新就提示目录没空间了,这时候就需要删除不用的老旧内核,之前都是uname, grep, dpkg之类的命令一条条敲,然后用眼睛看需 ...