构造函数内的方法 直接写在构造函数内部 与 写在prototype上 的区别

于 2023-08-22 18:37:31 发布
阅读量796 收藏
点赞数 2
分类专栏： JavaScript 文章标签： 原型模式 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52697994/article/details/132432806
版权

文章目录

前言

以前没注意过, 去创建一个构造函数的时候, 方法都是直接写在函数内的. 在构造函数需要多次实例化的情况下有缺点, 不过幸好以前项目里的构造函数也不需要多次实例化, 缺点没有生效.

区别

为了比较, 先在构造函数内部直接书写方法, 查看实例化结果:

function Person(age, sex) {
   
  this.age = age;
  this.sex = sex;
  this.getAge = function () {
   
    console.log
最低0.47元/天 解锁文章
白瑕
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈js构造函数的方法与原型prototype
01-19
把方法写在构造函数内的情况我们简称为函数内方法,把方法写在prototype属性上的情况我们简称为prototype上的方法。 •函数内的方法： 使用函数内的方法我们可以访问到函数内部的私有变量,如果我们通过构造函数new...
js在类中的构造函数中写方法与在构造函数外写方法有什么不同？
总柴的博客
03-26 865
js在类中的构造函数中写方法与在构造函数外写方法有什么不同？ 在构造函数中初始化的方法属于类的属性，属性值为函数，其是可遍历的； 而在构造函数之外初始化的方法属于类的方法，其是不可遍历的； 但二者在功能上并没有什么异同，都可以正常调用。 举例： class Person { constructor(name) { this.name = name; this.say = () => { console.log('hello'); } } walk() { console.l
构造器（构造方法）：有参构造、无参构造
@Fonden
07-16 1304
People zhangsanPeople = new People(); // 对象的初始化 1 // 给刚生下来的小孩设置初始值 zhangsanPeople.setName("zhangsan"); zhangsanPeople.setAge(1); zhangsanPeople.setWeight(4); --------------------...
构造函数内部定义的方法和挂在原型上的方法的区别
qq_34093387的博客
10-10 330
function A() { this.name = 'a' this.sayHello = function() { return 'Hello' } } function B() { this.name = 'b' } B.prototype.sayHello = function() { return 'Hello' } var a = new A() var .
构造函数方法与原型链方法的区别
abuanden的博客
03-22 360
ES5的解释 在new一个实例之后，他的实例可以调用构造函数和prototype上面的方法。 但是不同的是，定义在构造函数里面的方法，会在每一个实例里面创建一个函数，占用空间。每个实例的test方法指向不同内存。而prototype中的方法，只占用一块内存，所有实例指向他，节约空间。 function Cat(x,y) { this.test1 = () => { console.log("我是1"); } } Ca
JS构造函数与原型prototype的区别介绍
10-22
这里，`type`属性和`eat`方法被定义在`Cat`构造函数的原型上。这样，所有`Cat`的实例都将共享同一个`type`属性和`eat`方法，节省了内存，因为它们只需要存储一次。 当我们比较两个实例的`eat`方法时，如`cat1.eat =...
js构造函数constructor和原型prototype原理与用法实例分析
10-15
主要介绍了js构造函数constructor和原型prototype原理与用法,结合实例形式分析js构造函数constructor和原型prototype基本原理、功能、使用方法及操作注意事项,需要的朋友可以参考下
async&await异步请求处理办法
白瑕 的博客
07-27 3644
async&await异步请求处理办法 目录async&await异步请求处理办法前言一、async1、async函数2、回调async函数以获取结果二、await末 前言 async函数(官方):使用async关键字声明的函数,是AsyncFunction构造函数的实例， 内部可以使用await关键字。两者的结合让我们可以用一种更简洁的方式完成基于Promise的异步行为，而无需刻意地链式调用Promise。 因为await在没说完async的情况下不好进行,我打算先说async,当然
两个原生JS跨页面传值的小方法
白瑕 的博客
07-28 3608
文章目录前言一、localStorage本地存储二、URL传值总结 这会不会是今天写的最简单的一篇文…? 前言 今天在学校做2020年的题,碰到一个需求:用户在这个页面选择了症状,需要在下一个页面显示出用户选择的项; 这,这就触及到我的知识盲区了… 我突然想到前几天写Vue用了localStorage,总算是没空着,但还是想知道会不会有更好的方法. 一、localStorage本地存储 不能用sessionStorage,sessionStorage在当前会话关闭之后会进行销毁,存储的东西在下个页面全是
for (var key in Obj)遍历JS对象/数组
白瑕 的博客
03-04 2902
这个方法还可以遍历数组，就放在一起写了。 在遍历对象时： var file = { sd:"dskdn", fg:"dadfc", hk:"iel" } for (var k in file) { console.log(k);//得到属性名、方法名 console.log(file[k]); } 下面是遍历对象时输出k的结果，输出属性名： 但在遍历数组时，输出
解决原生template标签在Vue中失效的问题
白瑕 的博客
02-17 2766
需要原生Javascript + three.js的数据标注平台加入Vue框架.本来挺顺利的, 我直接在mounted周期做了初始化, 然后剩下的操作还是交给JavaScript文件执行, 最后发现里面有很明显的事件触发问题.
JavaScript 闭包详解
白瑕 的博客
08-04 2273
JavaScript闭包 文章目录JavaScript闭包一、为什么要闭包二、外部得以访问函数内变量三、某些变量得以常驻内存1.垃圾回收机制对闭包的处理2.结合立即执行函数来保存某些变量总结 # 前言 ## 1.什么是闭包函数 闭包函数是声明在另一个函数内的函数,是被嵌套在父函数内部的子函数,在《JS高级程序设计-第3版》中对闭包解释是:"闭包是指有权访问另外一个函数作用域中的变量的函数." 闭包函数可以访问[包裹其的函数]内的各种参数和变量,即便外部函数已经执行完毕.(至于为什么请看下文). 一、为什么
JavaScript 如何正确的分析报错信息
白瑕 的博客
01-14 2121
JavaScript 如何根据报错信息快速锁定错误位置.
JavaScript WeakMap
白瑕 的博客
01-24 1656
我在处理一个复杂对象的深拷贝方法时接触到WeakMap, 其作为缓存结构以解决对象内部的循环引用问题. 为了改造这个方法, 决定研究WeakMap。
箭头函数的this
白瑕 的博客
05-29 1604
文章目录一、熟悉箭头函数1.传一个参数2.传多个参数二、this指向问题总结 一、熟悉箭头函数 箭头函数是ES6新增的语法,当准备把函数作为参数传递时,用箭头函数看起来会比较简洁,简洁,但是可读性略差(尤其是它被省略的根本不像个函数的时候). 1.传一个参数 const 函数名 = 参数 => { xxx函数体 xxx函数体 } 或 const 函数名 = (参数) => { xxx函数体 xxx函数体 } 2.传多个参数 const 函数名
JavaScript 基于reduce方法实现数组内对象的同属性运算
白瑕 的博客
09-22 1452
JavaScript 基于`reduce()`方法对数组内多对象的同属性运算, `reduce()`遍历数组求和, `reduce()`方法的基本使用, `reduce()`方法如何内置判定, `reduce()`操作数组内对象.
HTML5 classList 操作类名
白瑕 的博客
09-28 1378
使用HTML5 classList在JS中操作类名 文章目录使用HTML5 classList在JS中操作类名前言一、classList.add()二、classList.remove()三、classList.replace()四、classList.toggle()五、classList.contains()总结 前言 今天遇到一个需求,需要在每次点击的时候触发CSS动画,但是按照以往的经验(走的弯路),一个CSS动画在触发一次之后,如果不做出改动,下次再触发就播放不了了. 比如给一个按钮添加一个点
JavaScript 监听鼠标左右同时按下/同时按下移动
最新发布
白瑕 的博客
04-06 1315
基于原生JavaScript, 在使用three.js的raycaster模拟瞄准及射击时用到.
JavaScript 基于栈和命令模式的撤销恢复操作
白瑕 的博客
01-06 1309
JavaScript基于栈和命令模式完成操作的撤销与恢复.
JavaScript内置对象与自定义构造函数深入解析
如果我们使用`prototype`来扩展对象，所有通过构造函数创建的新对象都将共享这些原型上的属性和方法，从而实现了代码的复用。例如： ```javascript person.prototype.greet = function() { console.log(`你好，我...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值