HTML 原型和原型链幻灯片.pptx

HTML 原型和原型链;课程大纲;1.类和对象;分析： 人 = { 姓名：‘xx’， 身高： xx ， 体重： xx , 能力： function(){} } 如上伪代码所述，如果【人】是一个对象，那么这个对象中应当包括一些信息。 如果你认同我上述代码的观点，那么请再来看下面一个问题： 【我】应该是一个什么样的对象？;根据上面我们所获得的结论，答案不言而喻： 我 = { 姓名：‘frank’， 身高： 180 ， 体重： 80 , 能力： function(){console.log(‘吃了睡睡了吃’);} } 如果没有疑问，在来看最后一个问题： 【刘诗诗】应该是一个什么样的对象？ 刘诗诗 = { 姓名：‘刘诗诗’， 身高： 162 ， 体重： 50 , 能力： function(){console.log(‘会卖萌’);} };现在我们来回顾一下刚刚创建的三个对象：;结论： 类是一种抽象的，并不实际存在的，表示一种事物共有特征的描述。 对象是一种具体的，实际存在的，类中的某一个个体。 我们刚刚所创建的【人】就可以称为是一个类（人类的由来） 而【我】【刘诗诗】均是人类中的某一个实际存在的个体，他们都是人类的一个对象。 思考： 结合我们现实生活，你还能举出哪些【类-对象】的例子？试列举一二。; ; ; ; ; ; ;2.面向对象思想概述;问题：求两个数的加和 方案： (1)pop：需要两个变量保存两个数， 需要一个算式计算求和， 需要一个变量保存结果 需要一个打印语句输出结果。 (2)oop：需要两个变量保存两个数 需要创建一个对象 对象中需要一个能计算加和的方法 对象中这个方法需要能打印计算结果 调用对象执行这个方法 ; 由上述问题得出：oop的核心就是如何构建一个对象。因为程序一切都围绕这对象行进。 所以构建对象可以说就是oop思想的一大特征， 而构建对象还有一个别名，叫做【对象的封装】！ 我们对于oop掌握到这里即可。剩余部分我们之后再聊。;3.原型;;那么从上面的图中我们就能够得到一个结论： 原型的作用其实就是为类(函数)提供了一个【公共区域】，在这个公共区域中声明的属性和方法能够被所有通过这个类所创建的对象所访问到。 ps：在原型中声明的属性和方法，有时也被称为是类的公有属性和公有方法; 那么在掌握了prototype之后，我们结合之前所说的创建类的方式。就能够得到以下的一段代码： function Car(lun1,lun2,lun3,lun4,ability){ this.lun1 = lun1; this.lun2 = lun2; this.lun3 = lun3; this.lun4 = lun4; this.ability = ability; } Car.prototype.showAbility = function(){ console.log(this.ability); }; var mycar1 = new Car(左前轮1,右前轮1,左后轮1,右后轮1,能跑1); var mycar2 = new Car(左前轮2,右前轮2,左后轮2,右后轮2,能跑2);;讲到这里，相信大家对于函数的原型应该已经有了一个清楚的认识。那么下面我们就来正式的认识一下原型(prototype). 概念：原型是js为所有函数所创建的一个对象类型的属性，原型当中的属性和方法被所有 通过这个函数所创建的对象共享。 结构：原型是一个对象，在原型中通常拥有两个属性： (1)构造器constructor：该属性指向了这个类本身 (2)原型指向__proto__:该属性指向原型本身，提供给通过类创建的对象使用。 作用：原型用来创建类的公有属性和公有方法，为创建对象服务 优点：节约内存空间，不必为每一个对象都分配公有属性和公有方法的内存。 缺点：原型中不能保存数组这类引用类型的数据， 因为地址传递的问题会导致出现修改的连锁变化 ;4.原型链; ;; ;5.继承;6.设计模式; ; ; ; ; ; ; ; ; ;更具行业竞争力 更高薪酬 更好的职业进阶发展