这次给大家带来如何使用js对象和原型,使用js对象和原型的注意事项有哪些,下面就是实战案例,一起来看一下。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <script> /* * * 复习: * * 面向过程和面向对象都是编程的思想,方式不一样 * 面向过程:凡事都是亲力亲为,所有的代码都要自己写,每一步都要很清楚,注重的是过程 * 面向对象:执行者成为指挥者,只要找对象,然后让对象做相关的事情,注重的是结果 * 面向对象的特性:封装,继承,多态 * 封装;就是代码的封装,把一些特征和行为封装在对象中. * 面向对象的编程思想 :根据需求,抽象出相关的对象,总结对象的特征和行为,把特征变成属性,行为变成方法,然后定义(js) 构造函数 ,实例化对象,通过对象调用 属性和方法 ,完成相应的需求.---编程的思想 * * 对象:具体特指的某个事物,有特征(属性)和行为(方法),对象可以看成是一坨无序属性的集合 * * 如何 创建对象 ? * 通过调用new Object(),还有{},自定义构造函数 * * 创建对象的方式 * 1. 调用系统Object()----->创建出来的对象都是Object类型的,不能很明确的指出这个对象是属于什么类型 * 2. 字面量的方式{}----->只能 创建一个对象 (一次只能创建一个) * * 3. 工厂模式 创建对象----->----->推论---->自定义构造函数的方式 * 自定义构造函数(优化后的工厂模式) * * 自定义构造函数创建对象:4件事 * 1.在内存中申请一块空闲的空间,存储创建的对象 * 2.this就是当前实例化的对象 * 3.设置对象中的属性和方法(为对象添加属性和方法,为属性和方法赋值) * 4.把创建后的对象返回 * 都是需要通过new的方式 * * * 什么是原型? * 构造函数中有一个属性prototype,是原型,程序员使用的 * 实例对象中有一个属性proto,是原型,浏览器使用的,不是很标准的, * 实例对象中的proto指向的就是该实例对象中的构造函数中的prototype * 构造函数中的prototype里面的属性或者方法,可以直接通过实例对象调用 * 正常的写法:实例对象.proto才能访问到构造函数中的prototype中的属性或者方法 * per.proto.eat();//proto不是标准的属性 * per.eat(); * 原型就是属性,而这个属性也是一个对象 * Person.prototype--->是属性 * Person.prototype.属性或者Person.ptototype.方法() * * 本身在构造函数中定义的属性和方法,当实例化对象的时候,实例对象中的属性和方法都是在自己的空间中存在的,如果是多个对象。这些属性和方法都会在单独的空间中存在,浪费内存空间,所以,为了数据共享,把想要节省空间的属性或者方法写在原型对象中,达到了数据共享,实现了节省内存空间 * * * * 原型的作用之一:数据共享,节省内存空间 * * 原型的写法: * 构造函数.prototype.属性=值 * 构造函数.prototype.方法=值---->函数.prototype,函数也是对象,所以,里面也有proto * 实例对象.prototype-------->实例对象中没有这个属性,只有proto(暂时的) * * 简单的原型的写法 * 缺陷:--->新的知识点---->原型直接指向{}---->就是一个对象,没有构造器 * 构造函数.prototype={ * 切记:如果这这种写法,要把构造器加上 * * }; * * * 通过原型为内置对象添加原型的属性或者方法----->原因: * 系统的内置对象的属性和方法可能不满足现在需求,所以,可以通过原型的方式加入属性或者方法,为了方便开发 * * 为内置对象的原型中添加属性和方法,那么这个内置对象的实例对象就可以直接使用了 * String.prototype.方法=匿名函数; * var str="哈哈"; * str.方法();---->实例对象可以直接调用原型中的属性或者方法 * * * * * * * * * * */ function Person(age) { this.age=age; } Person.prototype.sayHi=function () { }; var p=new Person(10); p.sayHi(); </script> </head> <body> </body> </html>
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
Atas ialah kandungan terperinci 如何使用js对象和原型. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!