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面向对象的几种写法的更多相关文章

  1. [JS] 面向对象的5种写法和拓展JS对象的写法

    面向对象的JAVA  最开始当然是对象的定义了 收集了以下的五种写法 //第1种写法 function Circle(r) { this.r = r; } Circle.PI = 3.14159; C ...

  2. js面向对象的五种写法

    第一种: //第1种写法 function Circle(r) { this.r = r; } Circle.PI = 3.14159; Circle.prototype.area = functio ...

  3. javascript中面向对象的5种写法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. js面向对象初步探究(上) js面向对象的5种写方法

    非常长一段时间看网上大神的JS代码特别吃力.那种面向对象的写法方式让人看得云里来雾里去.于是就研究了一下JS面向对象.因为是初学,就将自己在网上找到的资料整理一下,作为记忆. js面向对象的5种写方法 ...

  5. JS 中面向对象的5种写法

    //第1种写法 function Circle(r) { this.r = r; } Circle.PI = 3.14159; Circle.prototype.area = function() { ...

  6. 归纳下js面向对象的几种常见写法

    //定义Circle类,拥有成员变量r,常量PI和计算面积的成员函数area() 1.工厂方式 var Circle = function() { var obj = new Object(); ob ...

  7. js面向对象的几种常见写法

    下面是一个简单的js对象:定义Circle类,拥有成员变量r,常量PI和计算面积的成员函数area(),常用为第一种和第三种. 1.工厂方式 var Circle = function() { var ...

  8. (转载)无缝滚动图片的js和jquery两种写法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. js类的几种写法

    我们常用的有以下几种方法来用JavaScript写一个“类”: 1. 构造函数(public属性和方法) 1: function Person(iName, iAge){ 2: this.name=i ...

随机推荐

  1. git学习笔记1

    很早以前就听说了git,今天就开始使用git,并做简单记录 在Linux上安装Git 首先,你可以试着输入git,看看系统有没有安装Git: $ git The program 'git' is cu ...

  2. JSP--JavaBean

    JSP 最强有力的一个方面就是能够使用 JavaBean 组件. 按照 Sun 公司的定义, JavaBean是一个可重复使用的软件组件.实际上 JavaBean 是一种 Java 类,通过封装属性和 ...

  3. 网络请求的基本知识《极客学院 --AFNetworking 2.x 网络解析详解--1》学习笔记

    网络请求的基本知识   我们网络请求用的是HTTP请求 Http请求格式:请求的方法,请求头,请求正文 Http请求的Request fields:请求的头部,以及被请求头部的一些设置 Http请求的 ...

  4. 为 Virtual Box 中的 CentOS 6.6 配置本地DVD光盘做yum软件源

    因为virtual box 中的centos配置host-only共享win7上网,配置失败,所以只能使用Centos的 DVD 光盘来配置yum软件源.不然就没得完了. 1. 首先要在virtual ...

  5. html页面识别当前系统和语言

    项目中需要一个下载功能,根据系统跳转到不同的页面,如iphone跳转到IOS页面,android跳转到android页面. 下面为页面判断页面: <!DOCTYPE HTML> <h ...

  6. 更改ubuntu下mysql的密码

    1.首先,进入环境中去,即 mysql  -u  root  -p   ,然后输入原始密码 2.此时会出现 mysql > 3.开始修改密码: mysql >   use  mysql ; ...

  7. WIN7下VPN服务器的建立 我又在给自己挖坑了。。。

    先说一下为什么会有这篇文章吧,和同学们玩局域网对战游戏一般都会用各种游戏对战平台,比如浩方之类的.但是用过这类东西的人都知道,抢房间.高延迟等等问题也是很麻烦的.于是我一个同学下了个VPN软件,但是与 ...

  8. (五) openwrt打包过程

    标签(空格分隔): Makefile 本周是成胖子每周一博第六周,更好地阅读体验,请点击这里 前言 前面我们已经讲了openwrt编译的大部分过程,包括大致的编译步骤,ipk的编译等.今天是我这个系列 ...

  9. Geoserver发布Oracle数据

    在Geoserver安装包中,默认是不能发布Oracle数据库里的数据的,只能发布postgis.shp等数据,详细如截图: 如果想发布oracle数据,得安装相应版本的关于oracle数据源的插件, ...

  10. java四舍五入的取舍

    一.保留2位小数,且四舍五入 String re = new java.text.DecimalFormat("#.##").format(3.14555); 结果:3.15 二. ...