javascript面向对象(二)

我们已经描述了对象的创建,那么接下来主要讲解对象的结构和对象的属性。

首先我们先看下对象和类的结构图

Person类

person的一个实例

那么在上面,我们称变量 p 是 Person类的一个实例(大家在学习或者其他的视频教学时经常听到 创建一个实例对象就是这么来的)。

在p和Person之间,通过在创建new Person的时候为对象p添加了两个主要的属性。

constructor:构造器 用来指向当前对象创建时,所调用的函数。

__proto__:原型指针属性.通常用来指向当前构造函数的prototype属性(Object.create的指向会有所趋避=>其实我不想写的 就怕有人纠结这个问题).

ok~那么我们在上面已经简单看到了constructor的指向,就可以知道p是哪个函数创建的

那__proto__属性是干什么的呢?

我们来看下面两个例子

我们以Person为构造函数分别创建两个实例,并且在zhang的时候传入对应的属性参数,在li的时候不传入参数,并做打印。

在看到结果的时候我们很明显的能发现两个小的问题.

1.new Person时 ,this对象会每次进行调用创建属性和方法,性能差

2.我们的两个对象都是person类所创建的,缺少共有的方法和属性。

补:比如每个人都会想··人应该有眼睛鼻子耳朵,那么这些东西我们不用特定的给予也应该存在,俩耳朵一个鼻子俩眼睛(特殊情况就算了)

所以我们需要使用原型模式来创建对象的共有属性和方法。

下面我们单独使用原型方式来创建一个人的类

最终的结果我们发现两者完全一样

这是因为js中创建对象,如果当前对象缺少私有属性的时候,如上面z和s本身是没有name属性的,name就会通过__proto__寻找构造函数的prototype对象下对应的属性或方法(对象本身是可以继承的,如果Person的原型也没有name属性,就会通过Person函数的__proto__去寻找,以此类推,因为js中所有的类最终都会指向Object对象,所以我们经常看到创建一个对象会默认携带.toString、length、name和其他的属性方法)。

那如果当前对象有私有的属性和方法会怎么办呢?我们是不是只要用prototype就好了,不需要在使用this创建了呢?

也不是的,来看下面的两个例子(为了保持代码的完整性,我的代码结构可能贴的比较多 大家忍耐下)

代码:

输出:

在这里有两个小小的问题:

1.使用prototype添加属性和方法时,代码量明显争夺

2.如果大家在认真看对比数据的情况下就能很明显有些数据结构不太明确了

那对于这里的解释··其实我也很无力,毕竟面向对象,不是补基础课程,我简单说下,理解不了的就死记硬背吧。

1.通过z.name=是重新赋值,添加的是私有属性,而name属性是值类型,会单独创建一块空间数据结构。

2.z.girlFriends.push 是调用属性增加数据结构的变量,那z本身是没有girlFriends的属性的,所以会通过__proto__默认指向Person.prototype下的girlFriends并在尾部追加一个变量。那当我们调用s.girlFriends的时候,因为本身没有对应的属性和方法,所以就会通过__proto__指向Person.prototype下的属性,该死的Person.prototype.girlFriends呗z给更改了,所以最后s和z的girlFriends就会是一样的。

3.那大家说··如果我使用z.girlFriends = "";会怎么样的?那z会和Person.prototype下的girlFriends脱节,因为 = 代表的是添加私有属性 重新赋值.

注:建议大家好好看看值类型和引用数据类型的区别与概念,还是蛮有用的

所以根据__proto__的特性和代码复用的原则,我们一般使用组合模式用来创建一个对象的构造函数。

那么我们再看看对象的一些其他属性:

this:在使用new关键字时,this会更改上下文指向当前我们新创建的实例。

isPrototypeOf:判断对象A是否为对象B的原型对象(B.__protot__是否指向A)。

如上面代码格式应该为(好好读代码):

hasOwnerPrototype:判断当前实例对象是否存在自己的私有属性

in:判断一个对象中是否包含属性或函数(通过__proto__指向的也包含在内)

时间: 2024-10-12 09:31:35

javascript面向对象(二)的相关文章

JavaScript面向对象(二)——成员属性、静态属性、原型属性与JS原型链

前  言 上一篇博客(https://www.cnblogs.com/qdjianghao/p/10177360.html )中,我们介绍了JS中的面向对象,并详细的解释了this的指向问题.本篇博客,我们继续来学习JS的面向对象.来深入理解一下JavaScript OOP中的成员属性/方法.静态属性/方法.原型属性/方法,并且一起来探讨一下JS中的原型与原型链. 一 成员属性与成员方法 在构造函数中,通过this.属性声明.或者实例化出对象后,通过"对象.属性"追加的.都属于成员属性

Javascript 面向对象二:继承

现在有一个"动物"对象的构造函数. function Animal(){ this.species = "动物"; } 还有一个"猫"对象的构造函数. function Cat(name,color){ this.name = name; this.color = color; } 一. 构造函数绑定 第一种方法也是最简单的方法,使用call或apply方法,将父对象的构造函数绑定在子对象上,即在子对象构造函数中加一行: function Cat

JavaScript 面向对象(三) —— 高级篇

JavaScript 面向对象(一) —— 基础篇 JavaScript 面向对象(二) —— 案例篇 一.json方式的面向对象 首先要知道,js中出现的东西都能够放到json中.关于json数据格式这里推荐一篇博客:JSON 数据格式 先看下json创建的简单对象:相比基础篇中的构造函数.原型等的创建方式,json方式简单方便:但是缺点很明显,如果想创建多个对象,那么会产生大量重复代码,不可取. JSON方式适用于只创建一个对象的情况,代码简介又优雅. 1 <!DOCTYPE html>

Javascript面向对象编程(二):构造函数的继承

这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例. 今天要介绍的是,对象之间的"继承"的五种方法. 比如,现在有一个"动物"对象的构造函数. function Animal(){ this.species = "动物"; } 还有一个"猫"对象的构造函数. function Cat(name,color){ this.name = name; this.color = col

javascript面向对象学习笔记(二)——创建对象

javascript面向对象学习笔记(二)--创建对象 工厂模式 该模值抽象了创建具体对象de过程.用函数来封装噫特定接口创建对象的细节. function createPerson(name,age,job){ var o=new Object(); o.name=name; o.age=age; o.job=job; o.sayName=function(){ alert(this.name); }; return o; } var person1=createPerson("Chiaki&

Javascript面向对象编程(二):构造函数的继承 作者:yuan一峰

Javascript面向对象编程(二):构造函数的继承 作者: 阮一峰 日期: 2010年5月23日 这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例. 今天要介绍的是,对象之间的"继承"的五种方法. 比如,现在有一个"动物"对象的构造函数. function Animal(){ this.species = "动物"; } 还有一个"猫"对象的构造函数. function

javascript面向对象(二)

创建对象 要创建一个对象我们可以用如下代码: var user = new Object(); user.name = '编程浪子'; user.age = 22; user.address = '四川成都'; 用这样的方法创建对象比较简单直观,也是JavaScript种创建对象最基本的方法.但是这样就有一个问题,如果我们需要创建多个对象,那么我就得写很多重复的代码.比如我们想创建另一个对象user1,我们就得重新将上面的代码重新写一遍,这在实际开发过程中是不合适的,这样如果对象过多,代码量将大

JavaScript面向对象及相关知识

最近在学习JavaScript面向对象,写下自己的理解及相关资料,以备查阅. 一.面向对象中涉及的相关几个概念 1.作用域 所谓作用域,就是说属性和函数的可访问范围.在JavaScript中,作用域分为两种.全局作用域和局部作用域. 所有没有var 声明 或 定义于最外层函数和最外层函数外面即为全局作用域.也就是定义可以随意调用. 自定义函数内部用var声明的为局部作用域. var num = 1; //全局作用域 window.onload = function() { //最外层为全局作用域

Javascript面向对象特性实现封装、继承、接口详细案例——进级高手篇

Javascript面向对象特性实现(封装.继承.接口) Javascript作为弱类型语言,和Java.php等服务端脚本语言相比,拥有极强的灵活性.对于小型的web需求,在编写javascript时,可以选择面向过程的方式编程,显得高效:但在实际工作中,遇到的项目需求和框架较大的情况下,选择面向对象的方式编程显得尤其重要,Javascript原生语法中没有提供表述面向对象语言特性的关键字和语法(如extends.implement).为了实现这些面向对象的特性,需要额外编写一些代码,如下.