千锋教育-做有情怀、有良心、有品质的职业教育机构

400-811-9990
手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

上海
  • 北京
  • 郑州
  • 武汉
  • 成都
  • 西安
  • 沈阳
  • 广州
  • 南京
  • 深圳
  • 大连
  • 青岛
  • 杭州
  • 重庆
当前位置:武汉千锋IT培训  >  行业资讯  >  Web前端技术分享之面向对象基础知识点梳理

Web前端技术分享之面向对象基础知识点梳理

来源:千锋教育
发布人:lemon
时间: 2021-05-11 12:55:00

       面向对象对于每一个Web前端人员来说都是必须要掌握的知识点,接下来千锋武汉Web前端培训小编就给大家简单分享面向对象中的部分基础知识。

       面向对象的语言有一个标志,那就是类的概念,而通过类可以创建任意多个具有相同属性和方法的对象。

90 

       创建对象

       创建一个对象,然后给这个对象新建属性和方法。

       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());//输出属性和方法的值

       上面创建了一个对象,并且创建属性和方法,在 run()方法里的this,就是代表 box对象本身。这种是 JavaScript创建对象最基本的方法,但有个缺点,想创建一个类似的对象,就会产生大量的代码。

       为了解决多个对象声明的问题,我们可以使用一种叫做工厂模式的方法,这种方法就是为了解决实例化对象产生大量重复的问题。

       function createObject(name, age) { //集中实例化的函数

       var obj = new Object();

       obj.name = name;

       obj.age = age;

       obj.run = function () {

       return this.name + this.age

       };

       return obj;

       var box1 = createObject('Lee', 100);//头一个实例

       var box2 =createObject('Jack',200);//第二个实例

       alert(box1.run()); //Lee100

       alert(box2.run()); //Jack200

       工厂模式解决了重复实例化的问题,但还有一个问题,那就是识别问题,因为根本无法判断某个实例的类型。

       ECMAScript中可以采用构造函数(构造方法),可用来创建特定的对象。可以把构造函数看成是某个类型。

       function Box(name, age) {//构造函数模式

       this.name = name;

       this.age = age;

       this.run = function () {

       return this.name + this.age + '运行中...';

       };

       var box1 = new Box('Lee', 100);

       var box2 = new Box('Jack',200);

       alert(box1.run());alert(box1 instanceof Box); //很清晰的识别他从属于 Box

       使用构造函数的方法,既解决了重复实例化的问题,又解决了对象识别的问题。

       使用构造函数和使用工厂模式不同之处如下:

       构造函数方法没有显示的创建对象(new Object());

       直接将属性和方法赋值给 this 对象;

       没有 renturn 语句。

       构造函数的方法有一些规范:

       函数名和实例化构造名相同且大写,(PS:非强制,但这么写有助于区分构造函数和普通函数);

       通过构造函数创建对象,必须使用 new 运算符。既然通过构造函数可以创建对象,那么这个对象是哪里来的,new Object()在什么地方执行了?执行的过程如下:

       当使用了构造函数,并且 new 构造函数(),那么就后台执行了 new Object();

       将构造函数的作用域给新对象,(即 new Object()创建出的对象),而函数体内的 this 就代表 new Object()出来的对象。

       执行构造函数内的代码;

       返回新对象(后台直接返回)。

       关于 this 的使用,this 其实就是代表当前作用域对象的引用。如果在全局范围 this 就代表 window 对象,如果在构造函数体内,就代表当前的构造函数所声明的对象。

       var box = 2;alert(this.box); //全局,代表 window构造函数和普通函数的唯一区别,就是他们调用的方式不同。只不过,构造函数也是函数,必须用new运算符来调用,否则就是普通函数。

       var box = new Box('Lee', 100); //构造模式调用

       alert(box.run());Box('Lee', 20); //普通模式调用,无效

       var o = new Object();虽然构造函数创建对象可以使用全局的函数 ,但这种方式又带来了一个新的问题,全局中的this在对象调用的时候是Box本身,而当作普通函数调用的时候,this 又代表window。

       以上就是千锋武汉Web前端培训小编分享的面向对象中的部分基础知识。希望本文的分享对小伙伴们学习Web前端有所帮助!了解更多Web前端入门知识点,你也可以来千锋武汉Web前端培训班进行系统的学习进阶,专业大牛讲师以项目驱动教学过程和内容,让你理论与实战兼备,快速就业拿高薪!现在咨询还可以获得两周免费试听机会,亲身实地感受教学品质!

声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。

猜你喜欢LIKE

什么是web前端开发?在哪学效果比较好

2023-03-23

JAVA培训班多少钱?JAVA培训班费用的影响因素

2023-03-07

初学武汉Java培训常见的5个问题及解决方案!

2022-06-29

最新文章NEW

想转行学it会不会有更多的就业机会

2023-03-13

如何快速学习java?学习java主要学什么

2023-02-28

学java有什么用,怎样才能学好java

2023-02-23

相关推荐HOT

更多>>

快速通道 更多>>

最新开班信息 更多>>

网友热搜 更多>>