分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

第163天:js面向对象-对象创建方式总结

发布时间:2023-09-06 01:40责任编辑:郭大石关键词:js面向对象

面向对象-对象创建方式总结

1、 创建对象的方式,json方式

推荐使用的场合: 作为函数的参数,临时只用一次的场景。比如设置函数原型对象

 1 var obj = {}; 2 //对象有自己的 属性 和 ?行为 3 // 属性比如: 年龄、姓名、性别 4 // 行为: 吃饭、睡觉、走路、讲课等... 动作 5 var obj2 = { ?6 ????name: ‘laoma‘, ?7 ????age: 18, ?8 ????sayHi: function(){ 9 ????????console.log( name + ‘say hi‘ );10 ????}11 };12 //添加其他属性:13 obj2.newProp = 123;// js的动态特性,如果没有要访问的属性,直接添加属性。

缺点: 不能作为对象创建的模板,也就是不能用new进行构造新对象。

2、 创建面向对象的方式: new Object()的方式。 不推荐使用。

1 var obj3 = new Object();2 //添加属性3 obj3.name = ‘kitty‘;4 obj3.sayHi = function() {5 ????console.log( name + ‘ ‘ + ‘say hi‘);6 };

缺点:跟上面的方式一样,只能临时用一下这个对象,不想作为new的构造模板是可以的。

3、 构造函数构造对象方法

一个函数对象 当做构造函数来使用,一般要把 函数对象的首字母大写

 1 function Persion() { 2 ????this.name = ‘123‘; // 通过this可以直接给 构造出来的对象添加属性。 3 ????this.sayHi = function() { 4 ????????console.log( this.name ); 5 ????}; 6 } ???7 ?8 var p ?= new Persion(); ?9 //** new 运算符的作用:10 // 第一步:11 // 执行构造函数(new后面的那个函数),在构12 //造函数内部创建一个空对象,13 // 第二步: 把上面的空对象跟构造函数的原型对象进行关联。14 // 第三步:然后把this 指向当前空对象15 //在构造函数执行结束后,把空对象返回 给 p16 17 console.log( p.name ); //p.name 从构造函数里面创建的。18 p.sayHi(); //在此方法内部的 this执行 p对象。

升级改造版本:

//第三种方式有个缺点: 对象的内部的函数会在每个对象中都存一份

//如果创建的对象非常多的话,那么非常浪费内存。函数的行为是所有对象

//可以共有,不需要每个对象都保存一份。所以,可以把函数放到原型中

//进行声明,那么所有对象都有了公共的函数,而且内存中只保留一份。

//所有的属性写到对象的内部

第三种的升级版:

 1 function Sprite() { 2 ????this.name = ‘123‘; 3 ????this.age = 19; 4 } 5 Sprite.prototype = { 6 ????sayHi: function() { 7 ?8 ????}, 9 ????init: function() {10 11 ????}12 };13 14 //继续升级: 把属性的设置做成参数化:15 function Sprite( sname, sage ) {16 ????this.name ?= sname || ‘‘;17 ????this.age = sage || 18;18 }19 20 Sprite.prototype = {21 ????sayHi: function() {22 23 ????},24 ????init: function() {25 26 ????}27 };28 29 //问题: 1、调用者如果传递参数的顺序发生变化,那么废了30 //问题: 2、 参数增减都会导致函数声明变化,调用的地方也可能发生变化。31 //如何解决:继续升级32 function Sprite( option ) { ?//我用一个对象把所有参数覆盖。灵活性就很强了。33 ?????????????????????????????//顺序无所谓,添加参数也无所谓了。34 ????this.name ?= option.name || ‘‘;35 ????this.age = option.sage || 18;36 }37 38 Sprite.prototype = {39 ????sayHi: function() {40 41 ????},42 ????init: function() {43 44 ????}45 };46 47 //继续优化,把初始化的代码 放到init函数中48 function Sprite( option ) { ?//我用一个对象把所有参数覆盖。灵活性就很强了。49 ?????????????????????????????//顺序无所谓,添加参数也无所谓了。50 ????this.init( option );51 }52 Sprite.prototype = {53 ????sayHi: function() {54 55 ????},56 ????init: function( option ) {57 ????????this.name ?= option.sname || ‘‘;58 ????????this.age = option.sage || 18;59 ????}60 };

第163天:js面向对象-对象创建方式总结

原文地址:https://www.cnblogs.com/le220/p/8400171.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved