Vue之JavaScript基础(闭包与原型链)
闭包
定义:能够访问另一个函数作用域的变量的函数。
作用:可以通过闭包,设计私有变量及方法
实例:
function outer() {
var a = '变量1'
var inner = function () {
console.info(a)
}
return inner // inner 就是一个闭包函数,因为他能够访问到outer函数的作用域
}
var inner = outer() // 获得inner闭包函数
inner() //"变量1"
模拟实现c#或java中创建类的功能
(function() {
var name = "wangyu"
Person = function (val) {
name = val
}
Person.prototype.setName = function (val) {
name = val
}
Person.prototype.getName = function () {
return name
}
}) var person1 = new Person('sj')
console.log(this.name) // 输出 undefined, 因为在function作用域外不能访问
console.log(person1.getName()) // 输出sj
容易产生的问题:
1. 引用的var定义变量可能发生变化,es6中使用let将不会有此问题
2. this的指向问题
var object = {
name: ''object",
getName: function() {
return function() {
console.info(this.name)
}
}
}
object.getName()() // underfined
// 因为里面的闭包函数是在window作用域下执行的,也就是说,this指向windows
3. 内存泄漏问题
function showId() {
var el = document.getElementById("app")
el.onclick = function(){
aler(el.id) // 这样会导致闭包引用外层的el,当执行完showId后,el无法释放
}
} // 改成下面
function showId() {
var el = document.getElementById("app")
var id = el.id
el.onclick = function(){
aler(id) // 这样会导致闭包引用外层的el,当执行完showId后,el无法释放
}
el = null // 主动释放el
}
原型链(简书:https://www.jianshu.com/p/08c07a953fa0)
定义:每个对象都可以有一个 原型 _proto_,这个原型可以有他自己的原型,以此类推,形成一个原型链;
原型指针:
_prototype_:prototype属性是函数所独有的,是从一个函数指向一个对象。它的含义是函数的原型对象(也就是这个函数所创建[new]实例的原型对象);这个属性是一个指针,指向一个对象,这个对象的用途就是包含所有实例共享的属性和方法(我们把这个对象叫做原型对象);
_proto_:_proto_是对象独有的,他总是指向 prototype(也就是指向构造函数的原型对象);函数也会有这个属性(因为再js的宇宙里万物皆对象,包括函数),指向null
constructor:每个函数都有一个原型对象,该原型对象有一个constructor属性,指向创建对象的函数本身。
结论:
1. _proto_ 是原型链查询中实际使用到的,它总是指向prototype
2. prototype是函数所独有的,在定义构造函数时自动创建,他总是被 _proto_ 所指
所有的对象都有 _proto_ 属性,函数这个特殊对象除了具有_proto_属性,还有特有的原型属性 prototype。prototype对象有 _proto_ 和 construction 属性。prototype可以给函数和对象添加可共享(继承)的方法、属性, _proto_是查找某函数或对象的原型链的方式。construction包含一个指针,指向原构造函数
原型链对象实例图:
欢迎浏览博主站点:http://www.devloper.top/(有免费的教学视频、博客文章与在线工具)
没有退路的时候,正是潜力发挥最大的时候。
Vue之JavaScript基础(闭包与原型链)的更多相关文章
- javascript基础学习系列-原型链模式
1.demo代码如下: 2.画图如下: 3.规则: 1)每一个函数数据类型(普通函数/类)都有一个天生自带的属性:prototype(原型),并且这个属性是一个对象数据类型的值 2)并且prototy ...
- JavaScript之继承(原型链)
JavaScript之继承(原型链) 我们知道继承是oo语言中不可缺少的一部分,对于JavaScript也是如此.一般的继承有两种方式:其一,接口继承,只继承方法的签名:其二,实现继承,继承实际的方法 ...
- jquery学习笔记---闭包,原型链,this关键字
网上的资料很多,关于闭包,原型链,面向对象之内的.本人也有一点自己的总结. 关于this: this 的值取决于 function 被调用的方式,一共有四种, 如果一个 function 是一个对象的 ...
- JavaScript高级内容:原型链、继承、执行上下文、作用域链、闭包
了解这些问题,我先一步步来看,先从基础说起,然后引出这些概念. 本文只用实例验证结果,并做简要说明,给大家增加些印象,因为单独一项拿出来都需要大篇幅讲解. 1.值类型 & 引用类型 funct ...
- JavaScript继承基础讲解,原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承
说好的讲解JavaScript继承,可是迟迟到现在讲解.废话不多说,直接进入正题. 既然你想了解继承,证明你对JavaScript面向对象已经有一定的了解,如还有什么不理解的可以参考<面向对象J ...
- JAVASCRIPT闭包以及原型链
方法内部还有个方法,实例化父方法后,再次调用父方法,可以运行父方法内部的子方法,这样的程序就叫做闭包 DEMO如下: //function outerFn() { // var outerVar = ...
- 几句话就能让你理解:this、闭包、原型链
以下是个人对这三个老大难的总结(最近一直在学习原生JS,翻了不少书,不少文档,虽然还是新手,但我会继续坚持走我自己的路) 原型链 所有对象都是基于Object.prototype,Object.pro ...
- JavaScript基础—闭包,事件
Js基础-闭包,事件 1:js中的闭包 概念:在一个函数内部又定义了一个函数,内部函数能访问到外部函数作用域范围内的变量,这时这个内部函数就叫做闭包,无论这个内部函数在哪里被调用都能访问到外部函数作用 ...
- javascript精髓篇之原型链维护和继承.
一.两个原型 很多人都知道javascript是原型继承,每个构造函数都有一个prototype成员,通过它就可以把javascript的继承演义的美轮美奂了. 其实啊,光靠这一个属性是无法完成jav ...
随机推荐
- 【LeetCode】54. Spiral Matrix 解题报告(Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 维护四个边界和运动方向 保存已经走过的位置 日期 题 ...
- 【剑指Offer】52. 两个链表的第一个公共节点 解题报告(Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 解题方法 方法一:栈 方法二:HashSet 方法三:不使用额外空间 日期 ...
- 【剑指Offer】把数组排成最小的数 解题报告(Python)
[剑指Offer]把数组排成最小的数 解题报告(Python) 标签(空格分隔): 剑指Offer 题目地址:https://www.nowcoder.com/ta/coding-interviews ...
- vue项目报错如下:(Emitted value instead of an instance of Error)
(Emitted value instead of an instance of Error) the "scope" attribute for scoped slots hav ...
- MySQL数据库基础(3)DDL和DML
一.使用DDL定义数据库和表结构 结构化查询语言:(Structured Query Language,SQL)是一种特殊目的的编程语言,是一种数据库查询和程序设计语言,专用于存取数据以及查询.更新和 ...
- git中submodule子模块的添加、使用和删除
git中submodule子模块的添加.使用和删除 原文链接:https://blog.csdn.net/guotianqing/article/details/82391665背景项目中经常使用 ...
- Kafka单机安装Version1.0.1(自带Zookeeper)
1.说明 Kafka单机安装,基于版本1.0.1, 使用kafka_2.12-1.0.1.tgz安装包, 其中2.12是编译工具Scala的版本. 而且不需要另外安装Zookeeper服务, 使用Ka ...
- Docker基本命令入门
本文介绍Docker基本的操作命令,包括对镜像容器的获取,查看,保存,启停等操作. 1. 检查docker的版本: docker version docker -v 2. 搜索名字叫做tutorial ...
- 初识python: 继承实例 - 学校、老师、学生
对学校.老师.学生做一个分类,并抽象成类.并实现各自的一些功能.代码如下: 父类1:学校 # 学校 class School(object): def __init__(self,name,addr) ...
- Redis_安装配置(2)
一.安装gcc依赖 由于 redis 是用 C 语言开发,安装之前必先确认是否安装 gcc 环境(gcc -v),如果没有安装,执行以下命令进行安装 $ yum install -y gcc 上面命令 ...