js创建对象的三种方式和js工厂模式创建对象
文章地址: https://www.cnblogs.com/sandraryan/
创建对象
创建对象的三种方式
构造函数 ,是一种特殊的方法。主要用来在创建对象时初始化对象
1. 调用系统的构造函数创建对象(又称为实例化一个对象)
var obj = new Object();
// 添加属性,方法
obj.name = 'jack';
obj.age = 20;
obj.eat = function(){
//匿名函数
console.log('hi');
}
// 调用属性/方法
console.log(obj.name);
obj.eat();
2. 自定义构造函数创建对象和工厂模式(不同)
构造函数首字母大写(区分构造函数和普通函数的人为规定)
对象是一个特定事物的属性和方法的集合,构造函数是类似于一大类的集合(js中没有类的概念)
利用一个构造函数创建对象的过程称为实例化一个对象
// 一个人的类型
var person = new Object();
person.name = 'lucy';
person.age = 20;
person.sayHi = function(){
console.log('person ' + person.name);
console.log('person ' + this.name); } // 一个学生的类型
var stu = new Object();
stu.name = 'sunny';
stu.age = 18;
stu.task = function(){
console.log('study ' + stu.name);
console.log('study ' + this.name);
}
// 在当前对象的方法中可以访问当前对象的属性,可用this指代 // 调用各自的属性
// 调用各自的方法 person.sayHi();
stu.task();
//判断person是否是一个对象,不能判断是那个对象(person还是stu)
console.log(person instanceof Object);
function Person(name,age) {
this.name=name;
this.age=age;
this.sayHi=function () {
console.log("您好");
};
}
//创建对象---->实例化一个对象,的同时对属性进行初始化 需要new关键字
var per=new Person("小红",20);
工厂模式创建对象
// 工厂模式创建对象
function createObject(name,age){
// 创建对象
var obj = new Object();
// 对象添加属性
obj.name = name;
obj.age = age;
// 对象添加方法
obj.sayHi = function(){
console.log('hi');
};
return obj;
}
var per1 = createObject('mary',10);
console.log(per1); var per2 = createObject('jack',20);
console.log(per2);
//new 用于创建空对象并使this指向当前对象

// 方法也可以传递不同的值
function createObject(name,age){
var obj = new Object();
obj.name = name;
obj.age = age;
obj.sayHi = function(word){
console.log(word);
};
return obj;
}
var per1 = createObject('mary',10);
per1.word = 'hello';
console.log(per1); var per2 = createObject('jack',20);
per2.word = 'hi';
console.log(per2);
共同点:都是函数,都可以创建对象,都可以传入参数
工厂模式:
函数名是小写
有new,
有返回值
new之后的对象是当前的对象
直接调用函数就可以创建对象
自定义构造函数:
函数名是大写(首字母)
没有new
没有返回值
this是当前的对象
通过new的方式来创建对象
3. 字面量方式
var Dog = {
name: 'jack',
age: 2,
eat: function(){
console.log('eating');
}
}
Dog.eat();
console.log(Dog);
// 创建一个叫dog的对象,添加名字/年龄/颜色的属性,行走和吃东西的方法

构造函数可以实例化对象
构造函数中有一个属性叫prototype,是构造函数的原型对象
构造函数的原型对象(prototype)中有一个constructor构造器,这个构造器指向的就是自己所在的原型对象所在的构造函数
实例对象的原型对象(__proto__)指向的是该构造函数的原型对象
构造函数的原型对象(prototype)中的方法是可以被实例对象直接访问的
js创建对象的三种方式和js工厂模式创建对象的更多相关文章
- js创建对象的三种方式
<script> //创建对象的三种方式 // 1.利用对象字面量(传说中的大括号)创建对象 var obj1 = { uname: 'ash', age: 18, sex: " ...
- spring入门:beans.xml不提示、别名、创建对象的三种方式
spring的版本是2.5 一.beans.xml文件不提示 Location:spring-framework-2.5.6.SEC01\dist\resources\spring-beans-2.5 ...
- Spring笔记03(Spring创建对象的三种方式)
1.创建对象的三种方式和bean的生命周期的验证: Animal接口代码: package cn.pb.dao; /** * 动物接口 */ public interface Animal { //吃 ...
- Spring创建对象的三种方式以及创建时间
创建对象的三种方式: 1.采用默认的构造函数创建 2.采用静态工厂方法 1.写一个静态工厂方法类 public class HelloWorldFactory { public static Hell ...
- JavaScript中创建对象的三种方式!
JavaScript中创建对象的三种方式! 第一种 利用对象字面量! // 创建对象的三种方式! // 1 对象字面量. var obj = { // 对象的属性和方法! name: 'lvhang' ...
- Spark部署三种方式介绍:YARN模式、Standalone模式、HA模式
参考自:Spark部署三种方式介绍:YARN模式.Standalone模式.HA模式http://www.aboutyun.com/forum.php?mod=viewthread&tid=7 ...
- js 函数定义三种方式
<p>Js 函数定义的三种方式:</p> <br> <p>方式一:function</p> <script type="te ...
- JavaScript 基础——使用js的三种方式,js中的变量,js中的输出语句,js中的运算符;js中的分支结构
JavaScript 1.是什么:基于浏览器 基于(面向)对象 事件驱动 脚本语言 2.作用:表单验证,减轻服务器压力 添加野面动画效果 动态更改页面内容 Ajax网络请求 () 3.组成部分:ECM ...
- C++创建对象的三种方式
C++在创建对象的时候,有三种方式: #include <iostream> using namespace std; class A { private: int n; public: ...
随机推荐
- JavaScript之HTML DOM Document 对象
文档对象代表您的网页. 如果您希望访问 HTML 页面中的任何元素,那么您总是从访问 document 对象开始. 下面是一些如何使用 document 对象来访问和操作 HTML 的实例. 查找 H ...
- 利用ajax异步校验验证码(转)
利用ajax异步校验验证码 示例结果如图所示 具体步骤如下: step1: jsp页面及js脚本 <%@page pageEncoding="utf-8" contentTy ...
- passive的作用和原理
passived到底有什么用? passived主要用于优化浏览器页面滚动的性能,让页面滚动更顺滑~~ passived产生的历史时间线 addEventListener():大家都是认识的,为dom ...
- 单行中文字和图片的相关height和line-height特性
这几天在做仿京东的产品页,发现在制作过程中的一些问题,需要好好研究下. 需要实现的效果如上图所示: 在写CSS样式的时候,对于我的关于竖线的做法是: 设置高度为14,border样式,但导致了一个问题 ...
- class介绍
ES6引入了Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类.基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对 ...
- 掀开SQL的神秘面纱,将优化进行到底
掀开SQL的神秘面纱,将优化进行到底 有这样一条奇怪的SQL,返回结果不足10行,逻辑读达到1.2w,存在索引却走多次全表扫描,如何揭开它神秘的面纱拯救系统性能,答案在这里,你不可错过! 本文来自上周 ...
- ajax请求与form表单提交共存的时候status为canceled
chrome浏览器调试,发现,status竟然是canceled状态 网上总论: 1.在URL变更后,会对当前正在执行的ajax进求进行中止操作.中止后该请求的状态码将为canceled 2.在使用到 ...
- controller接收前台数据—中文乱码问题
项目用的开发环境为tomcat+eclipse+SSM 正如题目,controller接收前台数据-中文乱码问题,在页面编码为UTF-8的前提下,解决方案有二: 一) controller接收数据时, ...
- python 错误类型
- poj 2342 hdu 1520【树形dp】
poj 2342 给出每个顶点的happy值,还有若干组两个顶点L,K关系,表示K是L的上司.求当K.L不同时出现时获得的happy值的最大和. 设dp[u][0]表示不选u结点时获得的最大值,dp[ ...