前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Javascript类函数中prototype与this的区别

Javascript类函数中prototype与this的区别

作者头像
用户2936342
发布于 2018-08-27 07:26:23
发布于 2018-08-27 07:26:23
94200
代码可运行
举报
文章被收录于专栏:nummynummy
运行总次数:0
代码可运行

在Javascript面向对象编程中,定义实例方法主要有两种:

  • 通过this变量定义
  • 通过prototype定义
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function Student(name){
    var name = name;
    function privateFunc(){
        console.log("This is a private fucntion");
    }
    this.showName = function(){
        privateFunc();
        console.log(name);
    }
    
}
Student.prototype.protoFunction = function(){
        //console.log(name);
        privateFunc();
}

var stu = new Student("Jim")
stu.showName();
stu.protoFunction();

通过this与prototype定义的方法有什么区别呢? 运行以上代码可以发现,showName方法可以访问类函数中的定义的变量与方法,而protoFunction只能访问showName方法。 如果将protoFunctionin定义在构造函数内部,就可以访问这些属性和方法了。但作为实例函数,如果定义在构造函数内部,每次实例化都要执行,显然在浪费内存,也不合理。 有些资料上把this.showName这类方法叫做特权方法,主要是为了访问内部的私有字段,这样就可以控制对某些字段的访问。 而protoFunction这类方法相当于类的实例方法,但能访问这些特权方法,间接访问私有字段。

结论: 如果要直接访问私有字段,应该使用特权方法,也就是this定义的方法,应该定义在构造函数内部。相反,如果不需要直接访问私有字段,应该使用prototype定义的方法,而且应该定义在构造函数外部。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016.04.17 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
前端小知识10点(2019.5.2)
因为匿名函数自执行里面的所有东西都是局部的,这样引用 jQuery 时,能防止和其他的代码冲突。
进击的小进进
2022/03/28
4050
前端小知识10点(2019.5.2)
JS中的面向对象、原型、原型链、继承总结大全
补充: js中说一切都是对象,是不完全的,在js中6种数据类型(Undefined,Null,Number,Boolean,String,Object)中,前五种是基本数据类型,是原始值类型,这些值是在底层实现的,他们不是object,所以没有原型,没有构造函数,所以并不是像创建对象那样通过构造函数创建的实例。关于对象属性类型的介绍就不介绍了。
疯狂的技术宅
2019/03/27
1.5K0
JS中的面向对象、原型、原型链、继承总结大全
【设计模式】学习JS设计模式?先掌握面向对象!
一个模式就是一个可重用的方案,可应用于在软件设计中的常见问题,另一种解释就是一个我们如何解决问题的模板 - 那些可以在许多不同的情况里使用的模板。 --w3cschool
一尾流莺
2022/12/10
4710
JavaScript常见的六种继承方式
面向对象编程很重要的一个方面,就是对象的继承。A 对象通过继承 B 对象,就能直接拥有 B 对象的所有属性和方法。这对于代码的复用是非常有用的。
Javanx
2019/09/05
7910
JavaScript函数及其prototype
函数可以通过声明定义,也可以是一个表达式。 (1)函数声明式: 分号是用来分隔可执行JavaScript语句,由于函数声明不是一个可执行语句,所以不以分号结束。
奋飛
2019/08/15
4120
「转」javascript中的prototype
在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例。但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不是基于‘类的',而是通过构造函数(constructor)和原型链(prototype chains)实现的。但是在ES6中提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让原型对象的写法更加清晰、更像面向对象编程的语法而已。
音视频_李超
2020/04/01
6170
「转」javascript中的prototype
JS进阶系列02-JS面向对象的三大特征之封装
JS 作为面向对象的一门语言,拥有和其他面向对象语言一样的三大特征,即封装(encapsulation)、继承(inheritance )和多态(polymorphism )。关于继承的概念和实现,在本系列不在赘述,有兴趣的同学可以看看JS入门难点解析12-原型链与继承。
love丁酥酥
2018/08/27
7970
JavaScript ES5 与 ES6 中的类(Class)详解
在 JavaScript 中,ES5 通过 **构造函数(Constructor)** 和 **原型链(Prototype Chain)** 实现面向对象编程(OOP),而 ES6 引入了 `class` 关键字,提供更清晰、更接近传统面向对象语言的语法。以下是两者的对比与详细说明:
jack.yang
2025/04/05
1430
JavaScript ES5 与 ES6 中的类(Class)详解
《JavaScript高级程序设计》读书笔记
数据传送率的单位.意思是每秒钟多少千字节.比如20Kbit/s就是每秒钟20000个字节.一般上网、下载的速度用这个单位.adsl宽带上网下载速度大概为30-50Kbit/s.
用户3880999
2023/04/13
6730
《JavaScript高级程序设计》读书笔记
JavaScript闭包
函数和对其词法环境lexical environment的引用捆绑在一起构成闭包,也就是说,闭包可以让你从内部函数访问外部函数作用域。在JavaScript,函数在每次创建时生成闭包。在本质上,闭包是将函数内部和函数外部连接起来的桥梁。
WindRunnerMax
2020/10/20
1.1K0
js中的面向对象程序设计
面向对象的语言有一个标志,那就是他们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象。
牛老师讲GIS
2018/10/23
6400
JavaScript实现继承的六种方式
prototype里有个属性constructor指向构造函数本身,但是, Student的原型已经被父类的实例取代了,所以指向也不正确,所以需要修复构造函数指向(这里网上的教程只是对组合继承、寄生组合式继承进行了修复,不知道是不是因为这个不常用的关系)
赤蓝紫
2023/03/11
5660
JavaScript实现继承的六种方式
JS面向对象高级特性
本篇是通过学习视频《一头扎进javascirpt高级篇》整理的一些相关知识,大致包括下面几个方面:   1 对象的创建方法   2 对象的对象属性、私有属性、类属性   3 对象的对象方法、私有方法、类方法   4 javascirpt的继承、封装、与多态   对象的创建方法:   对象的创建可以通过两种方式,第一种通过对象初始化的方法: var person={ name:"xingoo", age:26,
用户1154259
2018/01/17
2K0
JS面向对象高级特性
JavaScript学习总结(四)——this、原型链、javascript面向对象
根据题目要求,对给定的文章进行摘要总结。
张果
2018/01/04
1.5K0
JavaScript学习总结(四)——this、原型链、javascript面向对象
JavaScript函数的prototype
在JavaScript中,每个函数都有一个特殊的属性称为"prototype"。函数原型是一个指向原型对象的指针,该原型对象包含可以由该函数的实例共享的属性和方法。
堕落飞鸟
2023/05/17
3200
类与继承
每个函数(普通函数、构造函数)都有一个prototype原型对象,每个prototype都有constructor属性,constructor指向函数本身 每个实例都有一个proto,指向构造函数的原型对象
用户7043603
2022/02/26
5020
高级Js-面向对象编程
高级Js-面向对象编程 目录 JavaScript Window-浏览器对象模型 匿名包装器 工厂方式 工厂方式改进版 同一个引用 构造函数与new命令 prototype 对象 面向对象的写法 原型链 面向对象的继承 面向组件编程 命名空间 JavaScript Window-浏览器对象模型 浏览器对象模型(BOM) 所有浏览器都支持 window 对象. 它表示浏览器窗口. 全局变量是 window 对象的属性. 全局函数是 window 对象的方法. 甚至 HTML DOM 的 docu
星辉
2019/01/15
1.9K0
js-函数的prototype
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/163403.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/15
7870
JavaScript学习总结(三)——闭包、IIFE、原型、函数与对象
一、闭包(Closure) 1.1、闭包相关的问题 请在页面中放10个div,每个div中放入字母a-j,当点击每一个div时显示索引号,如第1个div显示0,第10个显示9;方法:找到所有的div,
张果
2018/01/04
1.6K0
JavaScript学习总结(三)——闭包、IIFE、原型、函数与对象
JavaScript 进阶
引用计数 IE采用的引用计数算法, 定义“内存不再使用”的标准很简单,就是看一个对象是否有指向它的引用。 算法:
小城故事
2023/04/03
1.3K0
JavaScript 进阶
相关推荐
前端小知识10点(2019.5.2)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验