创建对象

  在JS中创建对象有很多方式,第一种:

var obj = new Object();

  第二种方式:

var obj1 = {};//对象直面量

  第三种方式:工厂模式

function Person(){

  var obj = new Object();
obj.name = 'xxx';
obj.age = 12;
return obj;
} var p1 = Person();
typeof p1 ;// object

  第四种方式:构造函数模式

    var Person = function(name,age,job){
this.name = name;//赋值
this.age = age;
this.job = job;
this.sayName = function(){
return this.name;
}
};

  通过构造函数的模式,需要经历四个步骤:

  1:创建一个新的空对象
  2:将构造函数的作用域赋给到空对象(this指向这个空对象)
  3:执行构造函数中的代码(为这个对象添加属性)
  4:返回这个对象

    var person1 = new Person('xx',12,'engineer');
var person2 = new Person('xxwy',12,'teacher');

  第五种方式,ES5实现,这种方式其实也是对象中的继承。

var obj2 = Object.createObject(obj1);

构造函数

var Person  = function(name){
this.name = name;
}
//new 操作符 var p1 = new Person('xxx');
p1.name ; //xxx //普通函数调用 Person('sssss');
window.name ;//sssss this指向window 在非严格模式下 //call,apply方式调用 var obj = {};
Person.call(obj,'dddddddddd');
obj.name ;//dddddddd
    var person1 = new Person('wfx',12,'engineer');
var person2 = new Person('wy',12,'teacher'); //这两个对象都有constructor(构造函数)属性
console.log(person1.constructor === Person); //true
console.log(person2.constructor === Person); //true

不过一般通过instanceof来判断实例对象是否属于该构造函数

console.log(person1 instanceof Person); //true
console.log(person2 instanceof Person); //true

构造函数和普通函数在JS中并没有任何区别,唯一的区别在于他们调用的方式不同。构造函数通过new 操作符调用。

    var Person = function(name){
this.name = name;
};
//构造函数new 操作符
var p1 = new Person('x');
p1.name ;//x
//普通函数调用
Person('d');
window.name ;//d 在非严格模式下 浏览器全局对象是window this指向window
//call apply方式调用 var obj = new Object();
Person.call(obj,'ddd');
obj.name; //ddd
构造函数存在的问题:
    //因为JS中函数是对象,新建函数时,创建新的函数不是同一个函数的实例
//即使同一个构造函数中同一个方法是不同的对象实例,但是方法又是完成一致。存在浪费内存
console.log(person1.sayName === person2.sayName);//false
改进方式:
1、创建全局函数,这个方式存在问题是,需要创建大量全局函数,没有封装性。
    var Cat = function(name){
this.name = name;
//this.sayName = function(){
// return this.name;
//}
this.sayName = sayName; }; function sayName(){
return this.name;
}

2、通过原型

首先我们认识原型,在每个函数创建的时候,就会通过一些系列规则给每个函数生成一个prototype属性,这个属性是一个指针,指向一个对象即原型对象(function.prototype)。给这个原型对象上添加属性或者方法可以让每个实例对象共享原型对象上的属性和方法。原型对象中会有一个constructor属性指向这个对象的函数(即原本函数)。

    var Dog = function(){};

    Dog.prototype.name = 'dog';//共享属性
Dog.prototype.sayName = function(){return this.name};//共享方法 var dog1 = new Dog();
var dog2 = new Dog();
console.log(dog1.sayName === dog2.sayName);//true
JS中有两个方法来判断 对象跟其原型对象的关系的方法:

1、isPrototypeof() 判断一个原型对象是否是该实例对象的原型对象

 var Person = function(){
this.name = 'wfx';
};
//Person.prototype.constructor == Person; true Person.prototype.name = 'wfx';
Person.prototype.age = 12;
Person.prototype.sayName = function(){
return this.name;
};
var person1 = new Person();
var person2 = new Person();
console.log(Person.prototype.isPrototypeOf(person1));//true
console.log(Person.prototype.isPrototypeOf(person2));//true

2、Object.getPrototypeOf(obj) 获得obj原型对象

     console.log(Object.getPrototypeOf(person1)===Person.prototype);//true
console.log(Object.getPrototypeOf(person2));//Person.prototype console.log(person1.name);//'wfx'

理解原型对象:

先看图

以前我们说过,创建函数的时候会自动生成prototype属性,该属性指向一个对象。在上图就是Person.prototype(原型对象),该原型对象中会自动生成一个constructor属性,该属性指向该构造函数即Person

每个实例对象中会带有一个内部属性[[prototype]],该属性会指向原型对象。

给原型对象添加一个name属性,一个sayName方法。

这是,person1实例对象会共享这个属性和方法,同时也会共享constructor属性。

1 person1.name;//张三
2 person1.sayName();//张三
3 person1.constructor;//Person

这里我们给person1实例对象添加一个name属性、

person1.name = '王麻子‘;

我们改变了person1对象的name属性。但是并没改变person2的name属性。

person2.name;//’张三‘
person1.name ;//'王麻子’

我们可以理解实例对象会首先查找自身是否带有该属性或者方法如果有限调用自身的属性或方法,没有的话在通过原型链(下面再说)查找原型对象是否有该属性或方法,有则调用没有则继续通过原型链查找上一级原型对象,以此类推,直至Object对象。

判断一个属性是否是实例对象自身的属性可以通过hasOwnProperty();

person1.name = 'ddddd';
person1.hasOwnProperty('name');//true;

判断一个属性是否是在实例对象属性中可以通过in 操作符;

name in person2 ;//true

枚举对象属性使用for in

for-in返回一个对象可以访问的属性

Object.keys(obj);返回一个对象可以枚举且是实例自身属性。

Object.getOwnPropertyNames(obj);返回对象所有的属性。

原型对象的问题

由于是共享,导致在引用数据类型共享

var Person = function(){

}
Person.prototype.firends = [1,23,4,4]; var p1 = new Person();
p1.firends;//[1,23,4,4];
p2.firends;//[1.23,4,4];
//修改p1.firends
p1.firends = ['a'];
//同时p2也被修改了。
p2.firends ;//['a']

 所以才用混合模式

//属性在构造函数中
var Person = function(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.firends = [1,2,3,4,5];
}
//方法在原型对象中
Person.prototype = {
constructor : Person,
sayName : function(){return this.name},
sayAge : function(){return this.age}
}

继承

  JS中的继承比较特别,因为JS没有真正的类这个说法,我们可以仿照经典类继承。我们还可以利用原型链实现继承,也可以同时使用经典继承和原型链继承。在ES5中有Object.create();继承的方式。

1:经典继承

  经典继承利用是函数的call,apply方法,改变this的指向。

var Person = function(name){
this.name = name;
}
var Man = function(name,sex){
Person.call(this,name);
this.sex = sex;
}

2:原型链继承

var Person = function(name){
this.name = name;
}
var Man = function(name,sex){
// Person.call(this,name);
this.sex = sex;
} Perosn.prototype = {
constructor:Person;
syaHi : function(){
return this.name;
}
}; Man.prototype = new Person();

3:混合模式继承

混合模式下也存在一些缺点,两次利用了构造函数。

var Person = function(name){
this.name = name;
}
var Man = function(name,sex){
Person.call(this,name);//第一次
this.sex = sex;
} Perosn.prototype = {
constructor:Person;
syaHi : function(){
return this.name;
}
}; Man.prototype = new Person();//第二次

4:改进继承

var Person = function(name){
this.name = name;
}
var Man = function(name,sex){
Person.call(this,name);//第一次
this.sex = sex;
} Perosn.prototype = {
constructor:Person;
syaHi : function(){
return this.name;
}
}; //extend函数
function extend(sub,sup){
//参考JS高级程序
var F = function(){};//创建一个空函数,在利用原型链的时候不在使用父类的构造函数
F.prototype = sup.prototype; sub.prototype = new F(); //实现原型继承
sub.prototype.constructor = sub;
sub.superClass = sup.prototype;.//方便调用父类的原型的方法
} extend(Man,Person);

JavaScript对象创建,继承的更多相关文章

  1. #JavaScript对象与继承

    JavaScript对象与继承 JavaScript是我在C语言之后接触的第二门编程语言,大一暑假的时候在图书馆找了一本中国人写的JavaScript程序设计来看.那个时候在编程方面几乎还是小白,再加 ...

  2. JavaScript对象的继承

    原文 简书原文:https://www.jianshu.com/p/78ce11762f39 大纲 前言 1.原型链继承 2.借用构造函数实现继承 3.组合模式继承 4.原型式继承 5.寄生式继承 6 ...

  3. javascript对象创建及继承

    //****************************************************************************** //创建类的多种方式 //------ ...

  4. JavaScript大杂烩4 - 理解JavaScript对象的继承机制

    JavaScript是单根的完全面向对象的语言 JavaScript是单根的面向对象语言,它只有单一的根Object,所有的其他对象都是直接或者间接的从Object对象继承.而在JavaScript的 ...

  5. JavaScript 对象创建

    tips: JavaScript 除了null和undefined之外,其他变量都可以当做对象使用. JavaScript 的基本数据类型有:number boolean string null  u ...

  6. 【JavaScript学习】JavaScript对象创建

    1.最简单的方法,创建一个对象,然后添加属性 var person = new Object(); person.age = 23; person.name = "David"; ...

  7. 深入JavaScript对象创建的细节

    最近深入学习javascript后,有个体会:面向对象的方式编程才是高效灵活的编程,也是现在唯一可以让代码更加健壮的编程方式.如果我们抛开那些玄乎的抽象出类等等思想,我自己对面向对象的从写程序的角度理 ...

  8. JavaScript对象创建的几种方式

    1 工厂模式 1.1 创建 function createFruit(name,colors) { var o = new Object(); o.name = name; o.colors = co ...

  9. Javascript 对象创建多种方式 原型链

    一.对象创建 1.new Object 方式 直接赋上属性和方法 var obj = new Object(); obj.name = '娃娃'; obj.showName = function(){ ...

随机推荐

  1. 腾讯GT的流畅度测试方案研究

    GT源码:https://github.com/TencentOpen/GT 一.流畅度模块的代码结构 流畅度插件总共就几个类,其实处理方式也比较简单粗暴,就是通过Choreographer输出的lo ...

  2. Parseval's theorem 帕塞瓦尔定理

    Source: wiki: Parseval's theorem As for signal processing, the power within certain frequency band = ...

  3. ubuntu源笔记

    比如说清华大学的ipv6镜像源:https://mirrors.tuna.tsinghua.edu.cn/help/ubuntu/ /etc/apt/sources.list为包管理工具apt的软件包 ...

  4. mybatis: 利用多数据源实现分库存储

    之前写过一篇mybatis 使用经验小结 提到过多数据源的处理方式,虽然简单但是姿势不太优雅,今天介绍一些更美观的办法: spring中有一个AbstractRoutingDataSource的抽象类 ...

  5. ConcurrentHashMap内存泄漏问题

    问题背景 上周,同事写了一段ConcurrentHashMap的测试代码,说往map里放了32个元素就内存溢出了,我大致看了一下他的代码及运行的jvm参数,觉得很奇怪,于是就自己捣鼓了一下.首先上一段 ...

  6. Linux常用获取进程占用资源情况手段

    测试环境:Ubuntu14.04 1.  获取进程ID号 ps -aux | grep your_process_name 例如: xxx@xxx:~$ ps -e |grep Midlet|awk ...

  7. insmod模块的几种常见错误

    1. 与内核版本不一致 嵌入式开发时,模块编译时需要制定内核的路径,内核的版本信息会加入到模块文件中,如果目标板上运行的内核与模块中包含的内核版本对不上,加载就会出错,报如下错误:  insmod i ...

  8. 【数据库】_由2000W多条开房数据引发的思考、实践----给在校生的一个真实【练耙场】,同学们,来开始一次伟大的尝试吧。

      ×   缘起---闲逛博客园 前几天的时候,在某一QQ群看到一条消息“XXX酒店开房XXXBTXX迅雷BT下载”,当时是一目十行的心态浏览,目光掠过时, 第一反应我想多了~以为是XX种子(你懂的~ ...

  9. Jquery 循环map的用法

    $.each(map,function(key,values){console.log(key);$(values).each(function(){console.log("\t" ...

  10. 【原创】自己动手写工具----XSmartNote [Beta 2.0]

    一.前面的话 在上一篇自己动手写工具----XSmartNote中,我简单介绍了这个小玩意儿的大致界面和要实现的功能,看了一下园子里的评论,评价褒贬不一,有人说“现在那么多云笔记的工具”,“极简版ev ...