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 ...
随机推荐
- 多线程之NSThread和NSObject
#pragma mark - NSThread实现多线程 /* // 获取当前线程 NSLog(@"currentThread = %@", [NSThread currentTh ...
- 【iOS开发】UIWebView与JavaScript(JS) 回调交互
------------------------------------------------- 很多关于objc 与 js 交互的文章都比较适用于 mac开发,iOS的webview 还是有所不一 ...
- android 定制自己的日志工具
最理想的情况是能够控制日志的打印,当程序处于开发阶段就让日志打印出来,当程序上线之后就把日志屏蔽掉. 例如打印一行WARN级别的日志就可以写成这样: LogUtil.w("TAG" ...
- JSP基础--JAVA遇见HTML
1.手工编写第一个WEB应用程序 2.默认访问服务器网页首页欢迎界面是 index.jsp,就是网页链接访问其所在的文件夹目录,不访问这个文件,也会自动访问的.如果这个文件夹目录下没有index.js ...
- Windows 7 与 Vmware Ubuntu 15.10_64 共享文件夹
设置共享文件夹 安装/更新最新的vmware-tools 安装 在ubuntu 内部会打开DVD ,里面的压缩包中包含vmware-toole. 先解压 ...
- javascript中的 类初始化,遍历for in 以及with的用法
<script type="text/javascript"> function member(name,gender){ this.name=name; this.g ...
- 深入理解java虚拟机(7)---线程安全 & 锁优化
关于线程安全的话题,足可以使用一本书来讲解这些东西.<Java Concurrency in Practice> 就是讲解这些的,在这里 主要还是分析JVM中关于线程安全这块的内容. 1. ...
- PHP扩展开发相关总结
1.线程安全宏定义 在TSRM/TSRM.h文件中有如下定义 #define TSRMLS_FETCH() void ***tsrm_ls = (void ***) ts_resource_ex(0, ...
- sass+compass+bootstrap三剑合璧高效开发记录
1. 先搭建环境,下载node.js,rubyinstaller,安装, 安装rubyinstaller时,要选上include system path,这样就会自动将node.js执行添加到wind ...
- 形如(function(){}).call()的js语句
研究新浪微博的自动登陆流程,其中涉及到它的加密算法脚本,其中有一段如下形式的代码: (function(){...}).call(name) 其中红色的....是函数的内部各种实现,name为一个对象 ...