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】636. Exclusive Time of Functions 解题报告(Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 栈 日期 题目地址:https://leetcode ...
- Spring MVC 文件上传、Restful、表单校验框架
目录 文件上传 Restful Restful 简介 Rest 行为常用约定方式 Restful开发入门 表单校验框架 表单校验框架介绍 快速入门 多规则校验 嵌套校验 分组校验 综合案例 实用校验范 ...
- 使用.NET 6开发TodoList应用(15)——实现查询搜索
系列导航及源代码 使用.NET 6开发TodoList应用文章索引 需求 本文我们继续来看查询过程中的另外一个需求:搜索.搜索的含义是目标字段的全部或者部分值匹配请求中的搜索条件,对应到数据库层面是C ...
- Java的generator工具类,数据库生成实体类和映射文件
首先需要几个jar包: freemarker-2.3.23.jar log4j-1.2.16.jar mybatis-3.2.3.jar mybatis-generator-core-1.3.2.ja ...
- JSP的数据从数据库中获取导入type=date的input标签中
jsp 页面最开始加上 <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %> & ...
- 对比显示每条线路的价格和该类型线路的平均价格,分别使用子查询和 exists 获取线路数量
查看本章节 查看作业目录 需求说明: 对比显示每条线路的价格和该类型线路的平均价格 分别使用子查询和 exists 获取线路数量超过"出境游"线路数的线路类型信息,要求按照线路数升 ...
- 【MySQL作业】DDL 和 DML——美和易思使用 DML 新增和更新表数据应用习题
点击打开所使用到的数据库>>> 1.添加 easyShopping 客户数据. insert into customer values('abc111','111',' 刘一鸣 ', ...
- linux脚本重启java服务
!/bin/bashpid=$(ps -ef | grep zwdatatransfer-1.0.0.jar | grep -v 'grep' | awk '{print $2}')kill -9 $ ...
- 【Linux】Linux安装JDK
1.下载linux版本的JDK1.8 链接:JDK下载链接 提取码:fxn4 链接:Xshell下载链接 提取码:439l 2.使用Xshell连接虚拟机,上传文件 在 /usr目录下创建一个新文件夹 ...
- python_接口自动化测试_处理参数替换
在进行自动化测试时,通常会存在A接口用例的返回值是B接口用例的入参这样的情况 可进行如下方式处理: step1.处理A用例时,在响应结果中提取出该数据的值,并赋给一变量,比如 exeId = res. ...