JavaScript创建对象的几种 方式
//JavaScript创建对象的七种方式
//https://xxxgitone.github.io/2017/06/10/JavaScript%E5%88%9B%E5%BB%BA%E5%AF%B9%E8%B1%A1%E7%9A%84%E4%B8%83%E7%A7%8D%E6%96%B9%E5%BC%8F/ 出处
//--1.工厂模式
function createPerson(name, job) {
var o = new Object()
o.name = name
o.job = job
o.sayName = function () {
console.log(this.name)
}
return o;
}
var person1 = createPerson('Jiang', 'student');
var person2 = createPerson('X', 'Doctor');
//--//-- //--2.使用构造函数创建对象
function Person() { }
var person1 = new Person() //new关键字 后边必须是函数名
person1.name = 'Jiang';
console.log(person1.name) //Jiang person1 instanceof Object // true //使用这个方式创建对象可以检测对象类型
person1 instanceof Person //true
//--//-- //--3.原型模式
function Person() {
}
Person.prototype.name = 'Jiang';
Person.prototype.job = 'student';
Person.prototype.sayName = function () {
console.log(this.name)
}
var person1 = new Person()
//--//-- //--4.更简单的写法
function Person() {
}
Person.prototype = {
name: 'Jiang',
job: 'student',
sayName: function () {
console.log(this.name)
}
}
var person1 = new Person(); //将Person.prototype设置为等于一个以对象字面量形式创建的对象,但是会导致.constructor不在指向Person了。 Person.prototype.constructor === Person // false //使用这种方式,完全重写了默认的Person.prototype对象,因此 .constructor也不会存在这里 //如果需要 constructor 这个属性的话,可以手动添加
function Person() {
}
Person.prototype = {
constructor:Person,
name: 'Jiang',
job: 'student',
sayName: function() {
console.log(this.name);
}
}; function Person() {
}
Person.prototype = {
name: 'jiang',
friends: ['Shelby', 'Court']
}
var person1 = new Person();
var person2 = new Person();
person1.friends.push('Van');
console.log(person1.friends) //[“Shelby”, “Court”, “Van”]
console.log(person2.friends) //[“Shelby”, “Court”, “Van”]
console.log(person1.friends === person2.friends) // true //friends存在与原型中,实例person1和person2指向同一个原型,person1修改了引用的数组,也会反应到实例person2中
//--//-- //--5.组合使用构造函数模式和原型模式
function Person(name) {
this.name = name;
this.friends = ['Shelby', 'Court'];
}
Person.prototype.sayName = function () {
console.log(this.name);
}
var person1 = new Person();
var person2 = new Person();
person1.friends.push('Van');
console.log(person1.friends); //[“Shelby”, “Court”, “Van”]
console.log(person2.friends);// [“Shelby”, “Court”]
console.log(person1.friends === person2.friends); //false
//--//-- //--6.动态原型模式
function Person(name, job) {
// 属性
this.name = name;
this.job = job;
// 方法
if (typeof this.sayName !== 'function') {
Person.prototype.sayName = function () {
console.log(this.name);
}
}
}
var person1 = new Person('Jiang', 'Student')
person1.sayName(); ///只有在sayName方法不存在的时候,才会将它添加到原型中。这段代码只会初次调用构造函数的时候才会执行。
//--//-- //--7.寄生构造函数模式
function Person(name, job) {
var o = new Object()
o.name = name;
o.job = job;
o.sayName = function () {
console.log(this.name);
}
return o;
}
var person1 = new Person('Jiang', 'student');
person1.sayName(); //这个模式,除了使用new操作符并把使用的包装函数叫做构造函数之外,和工厂模式几乎一样
//构造函数如果不返回对象,默认也会返回一个新的对象,通过在构造函数的末尾添加一个return语句,可以重写调用构造函数时返回的值
//--//--
JavaScript创建对象的几种 方式的更多相关文章
- JavaScript 创建对象的七种方式
转自:xxxgitone.github.io/2017/06/10/JavaScript创建对象的七种方式/ JavaScript创建对象的方式有很多,通过Object构造函数或对象字面量的方式也可以 ...
- javascript创建对象的几种方式
javascript创建对象简单的说,无非就是使用内置对象或各种自定义对象,当然还可以用JSON:但写法有很多种,也能混合使用.主要为下面几种:1.对象字面量的方式 person={firstname ...
- [转载]javascript创建对象的几种方式
原文链接:http://qingfeng825.iteye.com/blog/1935648 1. 工厂方法:能创建并返回特定类型对象的工厂函数(factory function). function ...
- JavaScript创建对象的6种方式
JavaScript创建对象简单的说,无非就是使用内置对象(Object)或各种自定义对象,当然还可以用JSON,但写法有很多种,也能混合使用. 1.对象字面量的方式 person = {name : ...
- javascript创建对象的几种方式?
javascript创建对象简单的说,无非就是使用内置对象或各种自定义对象,当然还可以用JSON:但写法有很多种,也能混合使用. 1.对象字面量的方式 person={ firstname:" ...
- JavaScript创建对象的几种方式总结
ECMA把对象定义为:无序属性的集合,其属性可以包含基本值.对象或者函数. 1. 使用Object构造函数创建对象 创建自定义对象的最简单的方式就是创建一个Object的实例,然后再为它添加属性和方法 ...
- javascript 创建对象的几种方式
1. //基于已有对象扩充其属性和方法var object = new Object(); object.name = "zhangsan"; object.sayName = f ...
- Javascript 创建对象的三种方式
function createPerson(name, qq) //工厂方式 { //在工厂里创建个对象 var obj=new Object(); obj.name=name; obj.qq=qq; ...
- javascript创建对象的7种方式
/*1.工厂模式*/ function createPerson(name,age,job) { var o = new object(); o.name = name; o.age = age; o ...
随机推荐
- 拷贝构造和拷贝赋值、静态成员(static)、成员指针、操作符重载(day06)
十七 拷贝构造和拷贝赋值 浅拷贝和深拷贝 )如果一个类中包含指针形式的成员变量,缺省的拷贝构造函数只是复制了指针变量的本身,而没有复制指针所指向的内容,这种拷贝方式称为浅拷贝. )浅拷贝将导致不同对象 ...
- HTML表示RGB颜色的方法
NAME:red,orange,yellow,green,cyan,blue,purple RGB:rgb(r,g,b) RGBA:rgba(r,g,b,a) r.g.b.a取值范围为:0-255 H ...
- canvas实现圆框图片
作者:issac_宝华链接:http://www.jianshu.com/p/9a6ee2648d6f來源:简书 在html中做圆框图片很容易,只需要简单的 border-radius: 50%; 当 ...
- 洛谷 P2534 [AHOI2012]铁盘整理
P2534 [AHOI2012]铁盘整理 题目描述 输入输出格式 输入格式: 共两行.第一行为铁盘个数N(1<=N<=50),第二行为N个不同的正整数,分别为从上到下的铁盘的半径R.(1& ...
- 框架统一出参数DTO格式
这个可以没必要定义. 每个接口返回自己的数据格式就好
- PHP扩展开发--实验成功
原文:http://kimi.it/496.html http://blog.csdn.net/u011957758/article/details/72234075 ---------------- ...
- jQuery中的closest()和parents()的差别
jQuery中的closest()和parents()的差别 jQuery中closest()和parents()的作用非常类似,都是向上寻找符合选择器条件的元素,可是他们之间有一些细微的差别,官网也 ...
- Justinmind使用教程(1)——概述部分
Justinmind(http://www.justinmind.com/),类似于Axure的一个原型设计工具.就眼下而言,最适合移动端进行原型设计的工具,预计抛开Axure几条街了,可是眼下国内站 ...
- Android Studio 编译Gradle提示编码错误
在Android Studio中,假设我们的代码有中文凝视.显示的时候全然正常,而编译的时候Gradle就会报错,可是又能够编译成功,并且Gradle报的错误信息,也是乱码! 这样我们就不好寻找错误原 ...
- 车载导航系统中GPS的定位
首先购买的车载导航系统有GPS信号接受功能,能够接收GPS的经纬度信号,然后导航终端里面安装的导航地图能够非常详细的显示详细的经纬度坐标和地物信息.导航终端通过接收器接收到卫星24小时不间断发射的免费 ...