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

简介: 面向对象-对象创建方式总结1、 创建对象的方式,json方式推荐使用的场合: 作为函数的参数,临时只用一次的场景。比如设置函数原型对象。  1 var obj = {}; 2 //对象有自己的 属性 和 行为 3 // 属性比如: 年龄、姓名、性别 4 // 行为: 吃饭、睡觉、走路、讲课等.

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

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 //在构造函数执行结束后,把空对象返回 给 p
16 
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 };

 

相关文章
|
3月前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
3月前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
3月前
|
JSON 前端开发 JavaScript
JavaScript中对象的数据拷贝
本文介绍了JavaScript中对象数据拷贝的问题及解决方案。作者首先解释了对象赋值时地址共享导致的值同步变化现象,随后提供了五种解决方法:手动复制、`Object.assign`、扩展运算符、`JSON.stringify`与`JSON.parse`组合以及自定义深拷贝函数。每种方法都有其适用场景和局限性,文章最后鼓励读者关注作者以获取更多前端知识分享。
39 1
JavaScript中对象的数据拷贝
|
3月前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
4月前
|
存储 JavaScript 前端开发
JavaScript 对象的概念
JavaScript 对象的概念
67 4
|
4月前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
48 2
|
4月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
71 1
|
4月前
|
JavaScript 前端开发 Unix
Node.js 全局对象
10月更文挑战第5天
57 2
|
4月前
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
90 0
|
4月前
|
JavaScript 前端开发 索引
JavaScript中数组、对象等循环遍历的常用方法介绍(一)
JavaScript中数组、对象等循环遍历的常用方法介绍(一)
61 0

热门文章

最新文章

  • 1
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    23
  • 2
    Node.js 中实现多任务下载的并发控制策略
    32
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    25
  • 4
    【JavaScript】深入理解 let、var 和 const
    48
  • 5
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    44
  • 6
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    53
  • 7
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    55
  • 8
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    71
  • 9
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55
  • 10
    JavaWeb JavaScript ③ JS的流程控制和函数
    62