清风陪你学习-JavaScript高级(一)面向对象,构造函数

JavaScript 高级

 

JavaScript是什么:

解析执行:轻量级解释型的,或是 JIT 编译型的程序设计语言

语言特点:动态,头等函数 (First-classFunction)

又称函数是 JavaScript 中的一等公民

执行环境:在宿主环境(host environment)下运行,浏览器是最常见的 JavaScript 宿主环境

但是在很多非浏览器环境中也使用 JavaScript ,例如 node.js

编程范式:基于原型、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如:函数式编程)编程风格

注:JavaScript 简称JS

JS能做什么:

Any applicationthat can be written in JavaScript, will eventually be written in JavaScript. 凡是能用 JavaScript 写出来的,最终都会用 JavaScript 写出来

·       知乎 - JavaScript 能做什么,该做什么?

·       最流行的编程语言 JavaScript 能做什么?

如何学习JS

JavaScript 的核心语法部分相当精简,也就是语言本身,只包括两个部分:1:基本的语法构造(比如操作符、控制结构、语句)2:标准库(就是一系列具有各种功能的对象比如ArrayDateMath)

想要实现其他复杂的操作和效果,都要依靠宿主环境提供API,目前,已经嵌入 JavaScript 的宿主环境有多种,最常见的环境就是浏览器,另外还有服务器环境(操作系统);

JavaScript 与浏览器的关系

整体上,分为两个部分学习:1:JavaScript 核心语法2:浏览器环境的宿主 API

【分享一个百度提供的思维导图:】

http://naotu.baidu.com/file/6bc928a89f63219f6b1fb3130ea2efdf?token=cdb752069cba0da1

 

以下是之前的J S基础知识点,复习一下。

0.1 JS语法基础-复习

·       变量:变量的声明及命名规则

·       数据类型:数值、字符串、布尔、undefinednull、对象

·       运算符:+ - * \ == !=< > ? && || :

·       流程控制结构: if else switch case while for

·       数组及函数:声明、访问、调用……

·       作用域:全局作用域、局部作用域、作用链

·       对象:声明、调用、属性、方法

·       内置对象:MathDateArrayString

·       JS代码执行流程

0.2 JS-WEB-API-复习

API:浏览器对象模型

·       定时器(setTimeout()setInterval()

·       location对象、history对象、navigator对象

·       事件:鼠标、键盘、表单、绑定、事件传播、事件对象(事件发生瞬间的一切信息,都包含在事件对象中)

DOM:文档对象模型

DOM对象、节点对象、节点属性、获取节点元素、节点元素的增删改查

createElementchildNodesremoveChildparentNodenextSiblingfirstChildinnerHTML……

1 JS面向对象编程

1.1 面向对象介绍

什么是对象?

Everything isobject (万物皆对象), JS语言中将一切都视为对象

      对象是对概念的具体化体现:

一本书、一辆汽车、一个人都可以是对象,一个数据库、一张网页、一个与远程服务器的连接也可以是对象。

当实物被抽象成对象,实物之间的关系就变成了对象之间的关系,从而就可以模拟现实情况,针对对象进行编程。

     编程中对象是一个容器,封装了属性(property)和方法(method

属性是对象的状态,方法是对象的行为(完成某种任务)。比如,我们可以把动物抽象为animal对象,使用属性记录具体是那一种动物,使用方法表示动物的某种行为(奔跑、捕猎、休息等等)。

也可以将其简单理解为:数据集或功能集

ECMAScript-262 把对象定义为:无序属性的集合,其属性可以包含基本值、对象或者函数。严格来讲,这就相当于说对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字,而每个名字都映射到一个值。

1.2 面向对象编程

面向对象不是新的东西,它只是过程式代码的一种高度封装,目的在于提高代码的开发效率和可维护性。

面向对象编程 —— ObjectOriented Programming,简称 OOP ,是一种编程开发思想。它将真实世界各种复杂的关系,抽象为一个个对象,然后由对象之间的分工与合作,完成对真实世界的模拟。

在面向对象程序开发思想中,每一个对象都是功能中心,具有明确分工,可以完成接受信息、处理数据、发出信息等任务。因此,面向对象编程具有灵活、代码可复用、高度模块化等特点,容易维护和开发,比起由一系列函数或指令组成的传统的过程式编程(proceduralprogramming),更适合多人合作的大型软件项目。

面向对象与面向过程:

       面向过程就是亲力亲为,事无巨细,面面俱到,步步紧跟,有条不紊

       面向对象就是找一个对象,指挥得结果

       面向对象将执行者转变成指挥者

       面向对象不是面向过程的替代,而是面向过程的封装

面向对象的特性:

       封装性

       继承性

       多态性

【扩展阅读:】

       维基百科 - 面向对象程序设计

       知乎:如何用一句话说明什么是面向对象思想?

       知乎:什么是面向对象编程思想?

1.3 创建对象

JavaScript 语言的对象体系,不基于创建对象,是基于构造函数(constructor)和原型链(prototype)。

简单方式创建对象

我们可以直接通过new Object()创建:

varperson=newObject()
person.name='Cold'
person.age=18

person.sayName=function () {
 
   console.log(this.name)
}

字面量方式创建对象

每次创建通过new Object()比较麻烦,所以可以通过它的简写形式对象字面量来创建:


var person= {
 
 name: ' Cold ',
 
 age: 18,
 
 sayName: function () {
 
   console.log(this.name)
 
}
}

对于上面的写法固然没有问题,但是假如我们要生成两个person实例对象呢?


var person1= {
 
 name: ' Cold ',
 
 age: 18,
 
 sayName: function () {
 
   console.log(this.name)
 
}
}

var person2= {
 
 name: 'Mike',
 
 age: 16,
 
 sayName: function () {
 
   console.log(this.name)
 
}
}

通过上面的代码我们不难看出,这样写的代码太过冗余,重复性太高。

简单方式的改进:工厂函数

我们可以写一个函数,解决代码重复问题:


function createPerson (name, age) {
 
 return {
 
   name: name,
 
   age: age,
 
   sayName: function () {
 
     console.log(this.name)
 
  }
  }
}

然后生成实例对象:


var p1=createPerson('Jack', 18)
var p2=createPerson('Mike', 18)

这样封装确实爽多了,通过工厂模式我们解决了创建多个相似对象代码冗余的问题,但是这依然没有脱离使用字面量方式创建对象的本质;

2构造函数

学习目标

·       构造函数语法

·       分析构造函数

·       构造函数和实例对象的关系

o  实例的 constructor 属性

o  instanceof 操作符

·       普通函数调用和构造函数调用的区别

·       构造函数的返回值

·       构造函数的问题

2.1 构造函数

JavaScript 语言使用构造函数作为对象的模板。所谓构造函数,就是一个普通的函数,只不过我们专门用它来生成对象,这样使用的函数,就是构造函数;

类似与PHPclass 的作用;它提供模板,描述对象的基本结构。一个构造函数,可以生成多个对象,这些对象都有相同的结构。


function Person (name, age) {
 
 this.name=name
 
 this.age=age
 
 this.sayName=function () {
 
   console.log(this.name)
 
}
}

var p1 =newPerson('Cold', 18)
p1.sayName() // => Jack

var p2 =newPerson('Mike', 23)
p2.sayName() // => Mike

解析构造函数代码的执行

在上面的示例中,Person()函数取代了createPerson()函数,但是实现效果是一样的。这是为什么呢?

我们注意到,Person()中的代码与createPerson()有以下几点不同之处:

·       没有显示的创建对象

·       直接将属性和方法赋给了this

·       没有return语句

·       函数名使用的是大写的Person

而要创建Person实例,则必须使用new操作符。

以这种方式调用构造函数会经历以下 5 个步骤:

1.     创建一个空对象,作为将要返回的对象实例。

2.     将这个空对象的原型,指向构造函数的prototype属性。先记住,后面讲

3.     将这个空对象赋值给函数内部的this关键字。

4.     执行构造函数内部的代码。

5.     返回新对象


function Person (name, age) {
 
 // 当使用 new 操作符调用 Person() 的时候,实际上这里会先创建一个对象
 
 // 然后让内部的 this 指向新创建的对象
 
 // 接下来所有针对 this 的操作实际上操作的就是刚创建的这个对象

 
 this.name=name
 
 this.age=age
 
 this.sayName=function () {
 
   console.log(this.name)
 
}

  // 在函数的结尾处会将 this 返回,也就是这个新对象
}

构造函数和实例对象的关系

构造函数是根据具体的事物抽象出来的抽象模板

实例对象是根据抽象的构造函数模板得到的具体实例对象

实例对象由构造函数而来,一个构造函数可以生成很多具体的实例对象,而每个实例对象都是独一无二的;

每个对象都有一个constructor属性,该属性指向创建该实例的构造函数

反推出来,每一个对象都有其构造函数


console.log(p1.constructor===Person) // => true
console.log(p2.constructor===Person) // => true
console.log(p1.constructor===p2.constructor) // => true

因此,我们可以通过实例对象的constructor属性判断实例和构造函数之间的关系

注意:这种方式不严谨,推荐使用instanceof操作符,后面学原型会解释为什么


console.log(p1instanceofPerson) // => true
console.log(p2instanceofPerson) // => true

constructor 既可以判断也可以获取

instanceof 只能用于判断

2.2 构造函数存在的问题

以构造函数为模板,创建对象,对象的属性和方法都可以在构造函数内部定义;


function Cat(name, color) {
 
 this.name=name;
 
 this.color=color;
 
 this.say=function () {
 
   console.log('hello'+this.name,this.color);
 
};
}
varcat1=newCat('', '白色');
varcat2=newCat('', '黑色');
cat1.say();
cat2.say();

在该示例中,从表面上看好像没什么问题,但是实际上这样做,有一个很大的弊端。那就是对于每一个实例对象,namesay都是一模一样的内容,每一次生成一个实例,都必须为重复的内容,多占用一些内存,如果实例对象很多,会造成极大的内存浪费。

对于这种问题我们可以把需要共享的函数定义到构造函数外部:


function say(){
 
   console.log('hello'+this.name,this.color);
}

function Cat(name, color) {
 
 this.name=name;
 
 this.color=color;
 
 this.say=say;
}
varcat1=newCat('', '白色');
varcat2=newCat('', '黑色');
cat1.say();
cat2.say();

这样确实可以了,但是如果有多个需要共享的函数的话就会造成全局命名空间及变量冲突的问题。

你肯定想到了可以把多个函数放到一个对象中用来避免全局命名空间冲突的问题:


vars= {
 
   sayhello:function (){
 
       console.log('hello'+this.name,this.color);
 
  },
    saycolor:function(){
 
       console.log('hello'+this.color);
 
  }
}

functionCat(name, color) {
 
 this.name=name;
 
 this.color=color;
 
 this.sayhello=s.sayhello;
 
 this.saycolor=s.saycolor;
}
varcat1=newCat('', '白色');
varcat2=newCat('', '黑色');
cat1.sayhello();
cat2.saycolor();

小结:

其实学习就是一个长久和习惯的事,一段时间扔下,可能就会忘记一些,我们要做到时常捡起来之前的东西来看看

相信只要持之以恒呢,一样会变成大牛的~加油

       构造函数语法

       分析构造函数

       构造函数和实例对象的关系

o        实例的 constructor 属性

o        instanceof 操作符

       构造函数的问题

"我是Spirit_Breeze,中文&lt;晟世清风>,在这纷纷乱世之中,祈望能有一股清流之风." 本人从事销售,不甘心于口舌之利,突然对代码和框架充满兴趣,遂之研究研究,欢迎研究讨论,转载请备注地址和作者,谢谢

猜你喜欢

转载自blog.csdn.net/spirit_breeze/article/details/80976866
今日推荐