Javascript：自定义构造函数的优化
2024-05-12 19:57:33
构造Dog类如何优化？
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script type="text/html">function Person(name,age,sex){// 1. 自动创建空对象，把对象地址给了this，this → 新对象// var this = new Object();// 2. this 给空对象绑定属性和行为this.name = name;this.age = age;this.sex = sex;// 3. 返回thisreturn this;}var p = new Person();
</script>
<script>function Dog(name,age,dogFriends) {// 属性this.name = name;this.age = age;this.dogFriends = dogFriends;// 行为this.eat = function (someThing) {console.log(this.name + "吃" + someThing);};this.run = function (someWhere) {console.log(this.name + "跑" + someWhere);}}
</script>
</body>
</html>
第一步：传参优化 利用json格式数据传参
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script type="text/html">function Person(name,age,sex){// 1. 自动创建空对象，把对象地址给了this，this → 新对象// var this = new Object();// 2. this 给空对象绑定属性和行为this.name = name;this.age = age;this.sex = sex;// 3. 返回thisreturn this;}var p = new Person();
</script>
<script>function Dog(options) {// 属性this.name = options.name;this.age = options.age;this.dogFriends = options.dogFriends;// 行为this.eat = function (someThing) {console.log(this.name + '吃' + someThing);};this.run = function (someWhere) {console.log(this.name + '跑' + someWhere);}}var options = {"name":"小花","age":1,"dogFriends":["小草","小可"]};var smallDog = new Dog(options);console.log(smallDog.name,smallDog.age,smallDog.dogFriends);smallDog.run('操场');
</script>
</body>
</html>
第二步：利用原型属性prototype共享库存放相同函数，节省内存空间。如果都在对象初始化的时候创建，每一个对象都会创建一个函数，浪费空间
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script type="text/html">function Person(name,age,sex){// 1. 自动创建空对象，把对象地址给了this，this → 新对象// var this = new Object();// 2. this 给空对象绑定属性和行为this.name = name;this.age = age;this.sex = sex;// 3. 返回thisreturn this;}var p = new Person();
</script>
<script>function Dog(options) {// 属性this.name = options.name;this.age = options.age;this.dogFriends = options.dogFriends;}Dog.prototype.eat = function (someThing) {console.log(this.name + '吃' + someThing);};Dog.prototype.run = function (someWhere) {console.log(this.name + '跑' + someWhere);};var options = {"name":"小花","age":1,"dogFriends":["小草","小可"]};var smallDog = new Dog(options);console.log(smallDog.name,smallDog.age,smallDog.dogFriends);smallDog.run('操场');
</script>
</body>
</html>
将所有的东西直接都放在原型对象中
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script type="text/html">function Person(name,age,sex){// 1. 自动创建空对象，把对象地址给了this，this → 新对象// var this = new Object();// 2. this 给空对象绑定属性和行为this.name = name;this.age = age;this.sex = sex;// 3. 返回thisreturn this;}var p = new Person();
</script>
<script>function Dog(options) {this._init(options);}Dog.prototype = {_init:function(options){this.name = options.name;this.age = options.age;this.dogFriends = options.dogFriends;},eat : function (someThing) {console.log(this.name + '吃' + someThing);},run : function (someWhere) {console.log(this.name + '跑' + someWhere);}};var options = {"name":"小花","age":1,"dogFriends":["小草","小可"]};var smallDog = new Dog(options);console.log(smallDog.name,smallDog.age,smallDog.dogFriends);smallDog.run('操场');
</script>
</body>
</html>
具体如何操作看具体需求来
Javascript：自定义构造函数的优化相关推荐
- JavaScript 自定义对象
原文:JavaScript 自定义对象 在Js中,除了Array.Date.Number等内置对象外,开发者可以通过Js代码创建自己的对象. 目录 1. 对象特性:描述对象的特性 2. 创建对象方式: ...
- 课程介绍 复习 创建对象的三种方式 自定义构造函数创建对象 工厂模式创建对象
课程介绍 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
- JavaScript 自定义对象 及 new()原理与实现 如何完整地手写实现new
JavaScript 自定义对象 及 new() 原理与实现 作者: 李俊才 邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.net/qq_285502 ...
- JavaScript的构造函数
构造函数是什么? 创建一个构造函数,专门用来创建Cat对象. 1.怎么用: 构造函数(Constructor)的创建方式和普通函数一样,但通常首字母进行大写,用于和普通函数区分,构造函数和普通函数的区 ...
- JavaScript自定义对象
JavaScript自定义对象 2.1.类和对象的概念 所谓对象就是真实世界中的实体,对象与实体是一一对应的,也就是说现实世界中每一个实体都是一个对象,它是一种具体的存在,可以发现身边很多对象,汽 ...
- FineReport中如何用JavaScript自定义地图标签
2019独角兽企业重金招聘Python工程师标准>>> 在日常使用地图过程中,通常会遇到地图标签,提示点等显示不满足我们的需求,需要进行JavaScript代码编写. 例如:在使用地 ...
- javascript中构造函数的返回值问题和new对象的过程
首先明白一点:javascript中构造函数是不须要有返回值的,这一点跟java非常类似.能够觉得构造函数和普通函数的最大区别就是:构造函数中没有return语句,普通函数能够有return语句.构造 ...
- html 元素允许右键,JavaScript 自定义html元素鼠标右键菜单功能
自定义html元素鼠标右键菜单 实现思路 在触发contextmenu事件时,取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象,来确定鼠标的点击位置,作为显示菜单的left和top值 ...
- Javascript自定义事件功能与用法实例分析
原文地址:https://www.jb51.net/article/127776.htm 本文实例讲述了javascript自定义事件功能与用法.分享给大家供大家参考,具体如下: 概述 自定义事件很难 ...
- 【Android 性能优化】布局渲染优化 ( 过渡绘制 | 背景设置产生的过度绘制 | Android 系统的渲染优化 | 自定义布局渲染优化 )
文章目录 一. 背景设置产生的过度绘制 二. Android 系统的渲染优化 1. 透明组件数据传递 2. GPU 存储机制 3. Android 7.0 之后的优化机制 三. 自定义布局渲染优化 一 ...
最新文章
- getCacheDir用法
- 物理光学1 波动方程与基础波函数
- Class 类文件结构
- php.ini中关于Session的配置
- scrapy使用cookie的三种方式
- Xcode 7新特性Lightweight Generics 轻量级泛型与__kindof修饰符
- moment格式换时间_不一样的日期、时间转换（moment.js）
- Django 报错 ‘polls‘ is not a registered namespace
- POJ3978 Primes【素数筛选+前缀和】
- Java实现人力资源管理系统
- cookie—基于js的coolie使用
- 无线射频专题《IEEE 802.11协议讲解1@路由高级配置项，Beacon周期、RTS阈值、DTIM》
- 7.arm汇编 bic和orr指令
- 吉他图形c语言代码,民谣吉他琴颈形状示意图（U型、V型、C型等）
- minecraft_如何使用MCEdit加快Minecraft的构建
- 小米重返世界前五发布红米Note 5A，京东神预言小米复苏
- 合工大路强java第四次作业第2题
- 软交换总结之五-GPRS相关：PCU与RPP的经典之作
- 【技术类】【ArcGIS对国产卫星的支持2：高分一号卫星】篇5、实时表观反射率产品生产
- 聊城市普通话水平测试软件音频,聊城市普通话水平测试培训-聊城市教师教育网.ppt...