面向对象和原型

## JavaScript高级第二天

### 面向对象的三大特性
* 封装
* 继承
自己没有的,拿别人过来用,就是继承
* 多态
父类引用指向子类的对象(JavaScript中用不到)
### 创建对象的四种方式
* 使用字面量创建对象
```js
var o = {key:value, key:value...}
```
用一个创建一个,不能复用,造成代码冗余,资源浪费
* 使用内置构造函数创建对象
```js
var o = new Object();
var o = new Array();
```
创建出来的对象都是空的对象,要手动的去为对象添加属性。造成代码重复
* 封装简单的工厂函数(不推荐使用)
```js
function createObj(){
var obj = {};
obj.xx=xxx;
return obj;
}
```
* 自定义构造函数
```
function 构造函数名{
this.xxx=xxx;
//....
}
```
0.构造函数名首字母要大写
1.构造函数一般和new关键字一起使用
2.构造函数返回值默认为新创建好对象 如果手动返回基本数据类型,不影响默认返回值,如果返回的是对象,那么新创建出来的对象将不会返回,取而代之的是return后面的对象

构造函数(constructor)的执行步骤
1.使用new关键字创建对象
2.调用构造函数,将new创建出来的对象赋值给构造函数内的this
3.使用this给新创建出来的对象增加成员
4.默认返回新创建出来的这个对象

### 原型
#### 构造函数存在问题
构造函数中的方法,每新创建一个对象的时候,该对象都会重新的创建一次这个方法,每个独享独占一个方法
但是该方法内容完全相同,所以造成资源浪费

1.解决办法1
将构造函数内的方法,进行提取,放在构造函数外面,在构造函数内部进行引用赋值
那么创建出来的对象,都会指向构造函数外面的这个函数,达到共享的目的
问题:全局变量增多,造成全局变量污染,代码结构混乱,不容易维护

2.解决办法2
使用原型

### 原型

#### 原型是什么?
在构造函数创建出来的时候,系统会默认的创建并关联一个对象,这个对象就是原型,原型对象默认是空对象
默认的原型对象中会有一个属性constructor指向该构造函数

#### 原型的作用
原型对象中的成员,可以被使用和它关联的构造函数创建出来的所有对象共享

#### 原型对象的使用
1. 使用对象的动态特性,为原型对象添加成员
2. 直接替换原型对象

注意事项:
直接替换原型对象,会导致替换之前创建的对象的原型和替换之后创建的对象的原型不一致

#### 原型的使用该注意事项
1.使用对象访问属性的时候,会现在对象中查找,如果找到了就直接使用
如果没有找到,就去原型中查找
2.使用对象设置属性的时候,只会在对象本身中查找,不会去原型中查找,如果在对象本身中没有找到这个属性
则给该对象新增一个属性,如果在对象中有这个属性,修改这个属性
3.如果在原型对象中有引用类型的属性,那么使用对象进行修改该属性内容,则其他所有跟这个原型对象相关的对象都会受到影响
Person.prototype.car = {};
var p = new Person( );
p.car = {}; //这是修改属性
p.car.brand= ""; //这是修改属性的内容
4.一般情况下不会将属性添加到原型对象中
只会将需要共享的方法,添加到原型对象中

#### __proto__
1.这个属性不是标准属性,所以存在通用性问题
2.一般不推荐使用这个属性
3.调试的时候,可以使用这个属性
4.这个属性是原型中的属性

替换原型时候的注意事项:
在新替换的原型中,没有constructor属性,会影响三角结构关系的合理性
so,在新替换的原型中,手动添加constructor属性,以保证关系的合理性,赋值为关联的构造函数

时间: 2024-07-29 20:08:44

面向对象和原型的相关文章

JS面向对象与原型

面向对象与原型一.创建对象 1.基本方法 1 var box = new Object(); //创建对象 2 box.name = 'Lee'; //添加属性 3 box.age = 100; 4 box.run = function(){ //添加方法 5 return this.name + this.age + '运行中...'; //this表示当前作用于下的对象 6 }; 7 8 alert(box.run()); 9 10 alert(this.anme); //这里的this代表

面向对象与原型4---原型

原型模式创建对象也有自己的缺点,它省略了构造函数传参初始化这一过程,带来的缺点就是初始化的值都是一致的.而原型最大的缺点就是它最大的优点,那就是共享.原型中所有属性是被很多实例共享的,共享对于函数非常合适,对于包含基本值的属性也还可以.但如果属性包含引用类型,就存在一定的问题: 1. //原型的缺点 function Box() {};Box.prototype = {constructor : Box,name : 'Lee',age : 100,family : ['父亲', '母亲', '

面向对象与原型5---继承

1.用原型链实现继承 最普通 但是没有办法传参,没有办法共享方法 继承是面向对象中一个比较核心的概念.其他正统面向对象语言都会用两种方式实现继承:一个是接口实现,一个是继承.而 ECMAScript 只支持继承,不支持接口实现,而实现继承的方式依靠原型链完成. 原型链是由原型加对象构造之间的关系结构形成的像一个链条一样 在 JavaScript 里,被继承的函数称为超类型(父类,基类也行,其他语言叫法),继承的函数称为子类型(子类,派生类). //继承,通过原型链实现 function Box(

面向对象与原型2---原型

1. 我们创建的每个函数(或称构造函数或对象)都有一个 prototype(原型)属性,这个属性是一个对象(这个对象下有个prototype属性,而这个属性其实是另外一个对象的引用,这个属性就是一个对象),它的用途是 包含可以由特定类型的所有实例共享的属性和方法(prototype共享放到其中的属性和方法,无论实例化多少对象,属性和方法都是共享的.这样有好处也有坏处.).逻辑上可以这么理解:prototype 通过调用构造函数而创建的那个对象的原型对象.使用原型的好处可以让所有对象实例共享它所包

第一百零九节,JavaScript面向对象与原型

JavaScript面向对象与原型 学习要点: 1.学习条件 2.创建对象 3.原型 4.继承 ECMAScript有两种开发模式:1.函数式(过程化),2.面向对象(OOP).面向对象的语言有一个标志,那就是类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是,ECMAScript没有类的概念,因此它的对象也与基于类的语言中的对象有所不同.   一.学习条件 在JavaScript视频课程第一节课,就已经声明过,JavaScript课程需要大量的基础.这里,我们再详细探讨一下: 1

【JavaScript】——剖析面向对象与原型(一)

在面向对象与原型一章中,感觉还是挺有意思的,而且视频讲解的也很清楚,在这里总结归纳一下视频里 讲的内容,顺便整理整理自己的思路. 首先画一张图,理一下这一整章的知识点. 下面针对具体的知识点去剖析各个知识点间的关系: 工厂模式 工厂模式的引出,是为了避免在创建对象过程中产生大量重复的问题.它封装了在创建对象过程一些重复 的代码,避免了代码冗余.举个简单的Demo: 1.普通的创建对象: var p=new Object(); p.name='王虹芸'; alert('姓名:'+p.name);

十一、面向对象与原型

十一.面向对象与原型 ECMAScript有两种开发模式:1.函数式(过程化),2.面向对象(OOP).面向对象的语言有一个标志,那就是类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是,ECMAScript没有类的概念,因此它的对象也与基于类的语言中的对象有所不同.   1.学习条件 在JavaScript视频课程第一节课,就已经声明过,JavaScript课程需要大量的基础.这里,我们再详细探讨一下: 1.xhtml基础:JavaScript方方面面需要用到. 2.扣代码基础:

面向对象之原型——challenge

面向对象之原型 object-oriented面向对象的设计,不同于其他语言,js中的面向对象没有类的概念,因此,其对象也有些特殊. 所谓对象就是无序属性的集合,其属性可以包含基本值.对象.函数.也就是说对象是一组没有特定顺序的值的集合:对象的每个属性或方法都有自己名字,名字映射到一个值(值可以是数据或者函数) 每个对象是基于引用类型创建的,是某个引用类型的实例.新对象就是new操作符后加一个构造函数创建的 1理解对象 这个就没什么必要,对象就是无序属性的集合,OK了 2创建对象 原始方式:传统

js面向对象及原型(javaScript高级程序设计第3版)

一.创建对象 创建一个对象,然后给这个对象新建属性和方法. var box = new Object(); //创建一个Object对象 box.name = 'Lee'; //创建一个name属性并赋值 box.age = 100; //创建一个age属性并赋值 box.run = function () { //创建一个run()方法并返回值 return this.name + this.age + '运行中...'; }; alert(box.run()); //输出属性和方法的值 上面

javascript的基础知识及面向对象和原型属性

自己总结一下javascript的基础知识,希望对大家有用,也希望大家来拍砖,毕竟是个人的理解啊 1.1 类型检查:typeof(验证数据类型是:string) var num = 123; console.log(typeof num); // 1.2 in 运算符 作用:判断指定属性是否存在于指定的对象中. 如果指定的属性存在于指定的对象中,则 in 运算符会返回 true. 语法: 属性 in 对象 返回值:true 或者 false 示例: var obj = { age: 18 };