web前端开发中关于面向对象(一)
2017-10-23 19:58
706 查看
IT专业人员应该都会涉及到一门语言:C++语言。C++语言中就提到了面向过程和面向对象的思想。面向过程、面向对象的思想不仅仅存在于C++语言中,Java、.NET、web前端开发中也存在。那么,web前端开发中,面向对象又是什么?今天,和大家一起学习web前端中关于面向对象。
一、什么是对象?
对象的某种事物,本质是无序的键值对的集合,可以说,万物皆对象。在语言中,对象=属性+方法(也可以说是行为)。
以一个例子来更好的说明面向对象:
以上代码块的解释:
1、function Person(){…}
定义了一个函数,该参数的关于人的信息。函数可传参数,可传参数的个数为两个,第一个为人的姓名,第二个参数为人的年龄,两个参数皆为形参,起到占位符的作用。
2、var p1=new Person(…)
定义了一个自变量p1,通过new来定义便确定了函数Person是一个构造函数,而自变量p1的该构造函数的一个实例,向构造函数Person传了两个参数,该两个参数为实参,即为实际的参数,传递给构造函数后会替代构造函数中的形参。
3、console.log(…)
在控制台打印出实例p1的结果。
4、详细介绍
a、构造函数的作用:实例化,产生一个实例对象。
b、new的功能:
(1)在内存中开辟一块内存空间
(2)该内存空间的地址赋给this
(3)将构造函数中的属性及传递的参数添加到该区域
(4)将this的值返回输出
二、实例对象
1、产生方法
(1)通过构造函数
(2)通过自变量
2、访问方式
(1)实例名.属性名
(2)实例名.方法名()
(3)实例名.[“属性名”]
(4)实例名.“方法名”
三、构造函数的返回值
1、构造函数显示的返回基本的数据类型,和不返回效果一致,返回原来的this,是具体的实例化对象
例:
p1的结果为:
“name”:Sue
“age”:20
2、构造函数显示的返回一个对象,实例化出的实例化对象为显示返回的对象
例:
p1的结果为:[1,1];
面向对象的思想中最为重要的为其中this的含义。
下面详细说明this的含义。this在函数中是最为常见的,但在不同的函数中,this的含义和指向也不相同
1、在事件函数中:this表示为事件源
2、在普通函数中:this表示window
3、在构造函数中:this表示实例化对象
4、在原型中:this表示实例化对象
5、在对象方法中:this表示方法的调用者,对象
在解释this的不同含义中提到了一个陌生的概念——原型。那么,原型又是什么?
四、原型
每个函数都有一个原型属性:prototype,该原型属性也是一个对象,默认是Object的实例({}或是new Object()),默认有两个属性(constructor、proto)。原型对象中的成员(属性、方法)被原型所属的构造函数实例化出来的对象所共享。
例:
五、构造函数、实例对象、原型三者联系
1、构造函数中都有一个原型属性prototype,该属性是引用类型,默认是Object的实例
2、原型对象中有一个属性constructor,该属性指向构造函数
3、实例对象当中都有一耳光属性proto,该属性指向其构造函数的原型prototype,该属性不是标准属性,不可用在编程中显示使用,该属性是浏览器自己使用。
例:
六、prototype和proto两者区别
1、两者均指向同一个对象
2、prototype站在构造函数的角度而言
3、proto站在实例对象的角度而言
七、函数
1、函数的本质:函数也是引用类型,函数名实际为内存地址。引用类型比较的是内存地址
2、函数是对象,对象不一定是函数。
关于面向对象还有许多知识。对于我们而言,面向对象是较为理解的一块知识点,只有不断的其尝试、验证才能够较好的理解面向对象的思想。
一、什么是对象?
对象的某种事物,本质是无序的键值对的集合,可以说,万物皆对象。在语言中,对象=属性+方法(也可以说是行为)。
以一个例子来更好的说明面向对象:
<script> function Person(name,age){ this.name=name; this.age=age; this.eat=function(){ console.log(this.name+"eating"); } } var p1=new Person("Sue",20); console.log(p1); </script>
以上代码块的解释:
1、function Person(){…}
定义了一个函数,该参数的关于人的信息。函数可传参数,可传参数的个数为两个,第一个为人的姓名,第二个参数为人的年龄,两个参数皆为形参,起到占位符的作用。
2、var p1=new Person(…)
定义了一个自变量p1,通过new来定义便确定了函数Person是一个构造函数,而自变量p1的该构造函数的一个实例,向构造函数Person传了两个参数,该两个参数为实参,即为实际的参数,传递给构造函数后会替代构造函数中的形参。
3、console.log(…)
在控制台打印出实例p1的结果。
4、详细介绍
a、构造函数的作用:实例化,产生一个实例对象。
b、new的功能:
(1)在内存中开辟一块内存空间
(2)该内存空间的地址赋给this
(3)将构造函数中的属性及传递的参数添加到该区域
(4)将this的值返回输出
二、实例对象
1、产生方法
(1)通过构造函数
(2)通过自变量
2、访问方式
(1)实例名.属性名
(2)实例名.方法名()
(3)实例名.[“属性名”]
(4)实例名.“方法名”
三、构造函数的返回值
1、构造函数显示的返回基本的数据类型,和不返回效果一致,返回原来的this,是具体的实例化对象
例:
<script> function Person(name,age){ this.name=name; this.age=age; this.eat=function(){ console.log(this.name+"eating"); return 1; } } var p1=new Person("Sue",20); console.log(p1); </script>
p1的结果为:
“name”:Sue
“age”:20
2、构造函数显示的返回一个对象,实例化出的实例化对象为显示返回的对象
例:
<script> function Person(name,age){ this.name=name; this.age=age; this.eat=function(){ console.log(this.name+"eating"); return [1,1]; } } var p1=new Person("Sue",20); console.log(p1); </script>
p1的结果为:[1,1];
面向对象的思想中最为重要的为其中this的含义。
下面详细说明this的含义。this在函数中是最为常见的,但在不同的函数中,this的含义和指向也不相同
1、在事件函数中:this表示为事件源
2、在普通函数中:this表示window
3、在构造函数中:this表示实例化对象
4、在原型中:this表示实例化对象
5、在对象方法中:this表示方法的调用者,对象
在解释this的不同含义中提到了一个陌生的概念——原型。那么,原型又是什么?
四、原型
每个函数都有一个原型属性:prototype,该原型属性也是一个对象,默认是Object的实例({}或是new Object()),默认有两个属性(constructor、proto)。原型对象中的成员(属性、方法)被原型所属的构造函数实例化出来的对象所共享。
例:
<script> function Person(name,age){ this.name = name; this.age = age; } Person.prototype.showName = function(){ console.log(this.name) } Person.prototype.showAge = function(){ console.log(this.age) } var p1 = new Person("zhangsan",13); var p2 = new Person('lisi',23); console.log(p1.showName()); console.log(p2.showAge()); </script>
五、构造函数、实例对象、原型三者联系
1、构造函数中都有一个原型属性prototype,该属性是引用类型,默认是Object的实例
2、原型对象中有一个属性constructor,该属性指向构造函数
3、实例对象当中都有一耳光属性proto,该属性指向其构造函数的原型prototype,该属性不是标准属性,不可用在编程中显示使用,该属性是浏览器自己使用。
例:
<script> var fn=new Function("..."); console.log(fn.__proto__==Function.prototype);//true console.log(Function.prototype.__proto__==Object.prototype);//true function Person(name,age){ this.name=name; this.age=age; } Person.prototype.showName=function(){ console.log(this.name); } Person.prototype.showAge=function(){ console.log(this.age); } var p=new Person("Sue",20); console.log(Person.prototype.constructor==Person);//true console.log(p1.__proto__==Person.prototype);//true </script>
六、prototype和proto两者区别
1、两者均指向同一个对象
2、prototype站在构造函数的角度而言
3、proto站在实例对象的角度而言
七、函数
1、函数的本质:函数也是引用类型,函数名实际为内存地址。引用类型比较的是内存地址
2、函数是对象,对象不一定是函数。
关于面向对象还有许多知识。对于我们而言,面向对象是较为理解的一块知识点,只有不断的其尝试、验证才能够较好的理解面向对象的思想。
相关文章推荐
- web前端开发中关于面向对象(三)
- Web前端从入门到精通-2 关于html和开发工具
- 关于web前端开发的一些认识
- 关于Web前端开发,附:(百度web前端笔试面试题目)
- 关于WEB前端开发的工具
- J2EE 关于Web前端与服务端实现开发分离的实践
- J2EE 关于Web前端与服务端实现开发分离的实践 .
- 收藏的一些关于web前端开发的资源(很强大,种类很多)
- 关于web前端开发的资源
- web前端-关于javascript开发的重要知识点
- [WEB前端开发]-关于Velocity中Map与List操作-解决velocity无法识别Map对象key的问题
- WEB前端开发学习----4.用JavaScript实现网页游戏的移动效果
- web前端开发--MyEclipse环境配置
- 移动WEB前端开发资源整合
- web前端开发中常用的尺寸和位置
- Web前端开发神器-WebStorm
- 极客Web前端开发资源大荟萃
- Web 前端开发规范手册(一)基本知识
- Web前端开发中的MCRV模式
- 【年度盛宴】2012年度最佳 Web 前端开发工具和框架——《下篇》