关于js面向对象的内容很多,很多人看书觉得很乱。因为内容太多了,又是原型,又是继承什么的。今天在园里看到“农村出来的大学生”写得一些js面向对象总结,自己一扫而过,很清晰,现在分享出来。
一、首先创建js对象的四种方式:
1.普通模式
1 var person=new Object();
2 person.name="盼盼";
3 person.age=22;ExtJS编码规范
4 person.sayHi=function(){
5 alert(this.name);
6 }
但是这样每次去创建一个类的对象相当的麻烦。所以有了下面的集中创建对象的模式。
2.工厂模式
1 function person(name,age){
2 var p=new Object();
3 p.name=name;
4 p.age=age;
5 p.sayHi=function(){
6 alert(this.name);
7 };
8 return p;
9 }
这样就创建一一个person类(并不是真正意义上的方法,其实我们能看到,它只不过是一个方法,一个Object的对象的实例而已,里面所谓的属性,只不过是以Object特有的键值对的形式存在)。
1 var p1 = person("盼盼",22);
2 var p2 = person("明明",26);
3 p1.sayHi();
4 p2.sayHi();
这个结果,应该猜都能猜出来。
3.构造函数模式
1 function person(name,age){
2 this.name=name;
3 this.age=age;
4 this.sayHi=function(){
5 alert(this.name);};
6 }
7 var p1 = new person("盼盼",22);
8 var p2 = new person("明明",26);
9 p1.sayHi();
10 p2.sayHi();
new关键字:
开辟堆空间;
创建对象;
将构造函数作用域赋值给新对象(this就指向了该新对象);
执行构造函数中的代码(为新对象添加属性);
返回新对象
4.原型模式,其实上面的集中方法都有大家看不到的缺陷。
每个实例上都有自定义的各个方法对象,这样多个对象调用这个方法的时候就消耗内存资源。我们在想能不能让同一个类的对象都区调用同一个方法对象。这样就不会占用那么多的内存空间。
好,这个时候prototype的好处就体现了。
1 function person(name,age){
2 this.name=name;
3 this.age=age;
4 }
5 person.prototype.sayHi=function(){
6 alert(this,name);
7 }
8 var p1 = new person("盼盼",22);
9 var p2 = new person("明明",26);
10 p1.sayHi();
11 p2.sayHi();Android应用程序内部启动Activity过程(startActivity)的源代码分析
二、继承
1.方法的继承,首先用原型模式创建一个父类。
1 function Person(name,age){
2 this.name=name;
3 this.age=age;
4 }
5 Person.prototype.sayHi=function(){
6 alert(this,name);
7 }
2.创建子类,
1 function Student()
2 {
3 }
4 Student.prototype=Person.prototype;
5 var stu=new Person();
如何判断stu继承了person?只要stu能点出sayHi这个方法出来就证明stu能够调用这个方法,也就是说继承了这个方法。
stu.sayHi();很显然的能点出来,运行的话,会弹出undefinde,既然弹出了,就证明方法执行了,方法执行了就证明方法继承过来的,至于弹出的我们下面来解决。//这样子类student就能够继承父类的方法。
但是这样父类的属性还没有继承过来,这个时候就需要考虑用到apply或者call方法,来改变函数的作用域了。
我们更改下这个子类的构造函数
1 function Student()
2 {
3 Person.apply(this,["panpan",22])
4 }
这个时候我们在执行sayhi这个方法的时候就会弹出panpan。那这个时候我们的继承就好解决了,我们可以在student这个类中传2个参数,name,age。然后在apply中的第二个参数设置为name和age的数组。
1 function Student(name, age) {
2 Person.apply(this, [name, age])
3 }
好吧,我们看下完整的代码。
1 function Person(name, age) {
2 this.name = name;
3 this.age = age;
4 }
5 Person.prototype.sayHi = function () {
6 alert(this.name);
7 }
8 function Student(name, age) {
9 Person.apply(this, [name, age])
10 }
11 Student.prototype = Person.prototype;
12 var stu = new Student("盼盼", "22");
13 stu.sayHi();
这样我们的继承问题就解决了。
1 Student.prototype = Person.prototype;
这个代码是把person的原型指针赋给了student的原型,也就是说我们给Student.prototype添加一个属性的时候,父类person也会具有这个属性。
1 Student.prototype.eat = function () {
2 alert(this.name+"我在吃饭");
3 }
4 var per = new Person("明明", 26);
5 per.eat();
这个时候就会弹出“明明我在吃饭”
但是
1 var per = new Person("明明", 26);
2 per.eat();
这个代码必须放在
1 Student.prototype.eat = function () {
2 alert(this.name+"我在吃饭");
3 }
之后,因为代码是从上到下执行的。
在没有给原型指针添加属性方法的时候是没办法访问到的。
上述的代码也就是说我们在给子类添加方法的时候,我们父类也有了这些方法,但是理论上来说对于继承是不允许这样的。
那么我们怎么对子类添加方法而不会使父类也拥有这些方法呢。
我们看一下,stu调用sayHi方法是怎么执行的。
首先创建一个stu的对象,在栈上保存这个变量stu,在堆上保存new出来的对象,stu这个变量指向堆上对象的地址。当我们调用stu的sayHi方法时,首先会到student这个对象去找方法,找不到这个方法,然后去原型里面去找, 由于这个方法的原型实质上是person类的原型的地址。所有就到person类中区找,找到了就调用这个方法。
如果我们将子类的原型指向父类的对象呢?
1 Student.prototype = new Person();
这就是所谓的原型继承。
这里我补充下继承的几种方法,上面的内容涉及到原型继承和类继承(构造函数继承),一般的类继承会使用call\apply函数去尝试绑定一个访问关系,让子类能够访问的父类的实例属性。这里就不多说,下面介绍一种实例继承,一般是用来封装系统对象的,也可以引用到自定义对象。如下:
1 function A(){
2 this.x = 1;
3 }
4 function B(){
5 var aObj = new A();
6 aObj.getX = function(){ //定义访问入口
7 alert(aObj.x);
8 }
9 return aObj;
10 }
11 var bObj = new B();
12 bObj.getX();
分享到:
相关推荐
这篇博文“javascript面向对象总结”深入探讨了JavaScript中的面向对象编程(OOP)概念,结合实际示例,提供了对这一主题的全面理解。以下是文章可能涉及的关键知识点: 1. **对象和属性**:在JavaScript中,一切皆...
JS面向对象的基础 写的很好的,大家去看JS面向对象的基础 JS面向对象的基础 写的很好的,大家去看JS面向对象的基础
### 面向对象JavaScript精要 #### 一、书籍概览 本书《面向对象JavaScript精要》由Nicholas C. Zakas编写,是面向对象编程领域中的权威指南之一,尤其针对JavaScript这门语言。作者深入浅出地介绍了面向对象编程的...
### JavaScript面向对象要点总结 在JavaScript中,面向对象编程(OOP)是一种广泛采用的编程范式,它允许开发者创建可重用、模块化的代码。本文将深入探讨JavaScript面向对象的关键概念,包括构造函数、原型链、...
JS面向对象基础.
### JavaScript面向对象编程精要 #### 一、引言 JavaScript是一种灵活且强大的脚本语言,它虽然起源于一种简单的浏览器脚本语言,但随着时间的发展,JavaScript已经成为了一种功能全面的编程语言,尤其是在Web开发...
根据提供的文件信息,我们将重点放在面向对象编程(OOP)在JavaScript中的应用上。JavaScript作为一种广泛使用的脚本语言,不仅在浏览器环境中发挥着重要作用,在服务器端开发(如Node.js)及桌面应用程序开发等领域也...
总结来说,"js 贪吃蛇(面向对象)"案例提供了学习和实践JavaScript面向对象编程的好机会。通过分析和实现这个案例,开发者可以深入理解面向对象的设计原则,提高代码复用和维护性,同时也能体会到面向对象编程在...
JavaScript是一种广泛应用于Web开发的动态编程语言,尤其以其强大的面向对象特性而闻名。面向对象编程(Object-Oriented ...通过阅读`prototype.js`这样的示例代码,可以帮助加深对JavaScript面向对象编程的理解。
### JavaScript面向对象精要 #### 一、概述 《JavaScript面向对象精要》是一本深入讲解JavaScript面向对象编程原理的专业书籍。本书由知名的前端开发者Nicholas C. Zakas撰写,全面介绍了JavaScript作为一种动态...
### JavaScript面向对象编程知识点概述 #### 一、现代JavaScript编程概览 - **JavaScript的演进**:自诞生以来,JavaScript经历了从一个简单的脚本语言到现今被广泛应用于构建复杂应用的强大编程语言的过程。它的...
### JavaScript面向对象编程详解 #### 一、引言 JavaScript作为一种广泛使用的脚本语言,在Web开发领域占据着举足轻重的地位。尽管JavaScript本质上是一种基于原型的语言,但它也支持面向对象编程的一些特性,使得...
### JavaScript面向对象编程详解 #### 6.1 JavaScript中支持面向对象的基础 ##### 6.1.1 使用定义函数的方式定义类 在面向对象编程(OOP)中,“类”是核心概念之一,它代表着一类事物的抽象。在JavaScript中,可以...
在这个“面向对象js开发钟表”的项目中,我们将深入探讨如何使用JavaScript实现一个自定义的钟表插件。 首先,我们需要理解钟表的基本组成部分:时针、分针和秒针。在面向对象的视角下,我们可以为每个部分创建单独...
### 面向对象技术-2,javascript教程,js面向对象教程 #### 课程目标概述 本教程旨在帮助读者深入理解面向对象编程的基础知识,并掌握JavaScript中的面向对象编程技巧。主要内容涵盖面向对象的基础概念、核心特性...
从所提供的文件信息中,我们可以总结以下几点与“JavaScript面向对象编程指南 第2版 高清 带索引书签目录_样章.pdf”相关的重要知识点。 首先,该文件提到的书籍是关于JavaScript面向对象编程的,面向对象编程...
总结来说,JavaScript面向对象编程涵盖了从基本原理到实现细节的多个方面,包括但不限于对象、构造函数、原型链、继承以及封装等。本书系统地介绍了这些知识点,并通过实例演示了如何在现代JavaScript中实现OOP,...
总结来说,`lang.js`是JavaScript开发者的一个强大工具,它通过提供面向对象的扩展,使得开发者可以在JavaScript中更加方便地实现类的定义和函数重载,提升代码的可维护性和可读性。通过阅读源码和示例,开发者可以...
本文总结了基于闭包的JavaScript面向对象编程框架的设计和实现。通过使用闭包,实现了基于类的面向对象编程的封装、继承和多态特征。 闭包(Closure)是JavaScript中的一种编程技术,通过闭包,可以实现基于类的...