关于js中this、原型与闭包的深入理解

1、this关键字

a、有对象指向对象;

b、没对象指向全局变量(window);

c、有new指向new出的新对象;

d、bind,call&apply改变this的指向;

e、setTimeout/setInterval this指向window;

f、箭头函数 this 是由函数定义时候确定的;

var adder = {  base : 1,      add : function(a) {    var f = v => v + this.base;    return f(a);  },  addThruCall: function inFun(a) {    var f = v => v + this.base;    var b = {      base : 2    };                return f.call(b, a);  }};

登录后复制

var obj = {  i: 10,  b: () => console.log(this.i, this),  c: function() {    console.log( this.i, this)  }}obj.b();  // undefined window{...}原型obj.c();  // 10 Object {...}

登录后复制

2、原型

prototype:

prototype:每一个对象都会在其内部初始化一个属性:即prototype;

原型链:当我们访问一个对象的属性时,如果这个对象内部不存在这个属性,那么就回去__proto__里找这个属性,这样一直找下去就是:原型链;

instanceof 原理是判断实例对象的__proto__和生成该实例的构造函数的prototype是不是引用的同一个地址。

hasOwnProperty 是 JavaScript 中唯一一个处理属性但是不查找原型链的函数。

1265396-20171127082821065-1506469155.png

构造函数  ->prototype-> 原型对象 -> constructor -> 构造函数

构造函数 -> new -> 实例对象

实例对象 -> __proto__-> 原型对象-> __proto__->原型对象->->null

执行上下文

变量声明与函数声明,其作用域会提升到方法体的顶部;

作用域:

a、javascript没有块级作用域

b、javascript除了全局作用域之外,只有函数可以创建的作用域。作用域在函数定义时就已经确定了。而不是在函数调用时确定。

闭包

概念: 内部函数可以访问外部函数中的变量;

使用:函数作为返回值;函数作为参数;

作用:封装变量,收敛权限;

缺点:消耗内存

创建对象的方法

对象字面量;

构造函数;

立即执行函数;

Object.create();

new 对象过程

创建新对象;

this指向这个新对象;

执行代码;

返回this;

类与继承

类的声明

function Animal(){    this.name = 'name';} // es6  class Animal2{    constructor(){        this.name = 'name2';    }}

登录后复制

继承

1.借助构造函数实现继承

function Parent(){    this.name = 'parent';} function Child(){    Parent.call(this);    this.type = 'child1';}

登录后复制

缺点:

部分继承;

继承不到父类原型对象上的方法;(只有父类的属性挂载到子类上了,Child的prototype没变为Child.prototype继承不了Parent的prototype)

2.原型链继

function Parent(){    this.name = 'name';}function Child(){    this.type = 'child';} Child.prototype = new Parent();

登录后复制

缺点:原型链上原型对象是共用的。(原型的属性修改,所有继承自该原型的类的属性都会一起改变)

3.组合方式

function Parent(){    this.name = 'parent';}function Child(){    Parent.call(this);    this.type = 'child';}Child.prototype = new Parent();

登录后复制

缺点:

父类执行函数执行两次;

constructor指向父类;

function Parent(){    this.name = 'parent';}function Child(){    Parent.call(this);    this.type = 'child';}Child.prototype = Parent.prototype;

登录后复制

缺点:

子类constructor指向父类

function Parent(){    this.name = 'parent';}function Child(){    Parent.call(this);    this.type = 'child';}Child.prototype = Object.create(Parent.prototype);Child.prototype.constructor = Child;

登录后复制

优点:

子类的原型指向Object.create(Parent.prototype),实现了子类和父类构造函数的分离,但是这时子类中还是没有自己的构造函数,

所以紧接着又设置了子类的构造函数,由此实现了完美的组合继承。(也就是把父类的prototype写入子类的prototype,在定义子类的constructor)

4. es6

class Child extends Parent {    constructor(){     }}

登录后复制

希望本文中的内容能够帮到学习JavaScript的同学。谢谢!

更多JavaScript的相关问题请访问PHP中文网:https://www.php.cn/

以上就是关于js中this、原型与闭包的深入理解的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2729910.html

(0)
上一篇 2025年3月8日 00:11:17
下一篇 2025年3月2日 01:51:58

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 关于JS中闭包概念的详细讲解(附实例)

    闭包(closure)是javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。 1、变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域。 变量的作用域无非就是两种:全局变量和局部变量。 Ja…

    2025年3月8日
    200
  • 浅谈JavaScript变量的作用域及闭包

    与闭包有关的概念:变量的作用域和变量的生存周期。下面本篇文章就来给大家介绍一下javascript中变量的作用域及闭包,有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 一、变量的作用域 1、变量的作用域指变量有效的范围,与…

    2025年3月8日
    200
  • 5种正确处理JS的this指向的方式

    我喜欢在JS中更改函数执行上下文的指向,也称为 this 指向。 例如,咱们可以在类数组对象上使用数组方法: const reduce = Array.prototype.reduce;function sumArgs() {  retur…

    2025年3月8日
    200
  • 深入了解JavaScript中的原型和继承

    本文主要讲了原型如何在JavaScript中工作,以及如何通过[Prototype]所有对象共享的隐藏属性链接对象属性和方法;以及如何创建自定义构造函数以及原型继承如何工作以传递属性和方法值。 介绍 javascript是一种基于原型的语言…

    2025年3月8日
    200
  • JavaScript中this绑定方式总结

    最近在回顾js的一些基础知识,把《你不知道的js》系列又看了一遍,this始终是重中之重,还是决定把this相关知识做一个系统的总结,也方便自己日后回顾。 this的四条绑定规则 1.默认绑定 这是最常用的函数调用类型:独立函数调用(即函数…

    2025年3月8日
    200
  • 浅谈JS函数及闭包

    每声明一个函数就会产生一个作用域。而外面的作用域访问不了里面的作用域(把里面的变量和函数隐藏起来),而里面的可以访问到外面的。对于隐藏变量和函数是一个非常有用的技术。 基于作用域隐藏的方法叫做最小授权或最小暴露原则。 这个原则是指在软件设计…

    2025年3月8日
    200
  • 关于js中的This指向问题的介绍

    1、基本概念 MDN的官方解释:与其他语言相比,函数的 this 关键字在 JavaScript 中的表现略有不同,此外,在严格模式和非严格模式之间也会有一些差别。在绝大多数情况下,函数的调用方式决定了this的值。this不能在执行期间被…

    2025年3月8日
    200
  • JS 中几种处理’this’指向的方式

    我喜欢在JS中更改函数执行上下文的指向,也称为 this 指向。 例如,咱们可以在类数组对象上使用数组方法: const reduce = Array.prototype.reduce;function sumArgs() {  retur…

    2025年3月7日
    200
  • js中闭包的概念

    闭包并不是 javascript 特有的,大部分高级语言都具有这一能力。 什么是闭包? A closure is the combination of a function bundled together (enclosed) with …

    编程技术 2025年3月7日
    200
  • 闭包应用场景有哪些

    闭包应用场景有:1、采用函数引用方式的setTimeout调用;2、小范围代替全局变量;3、有权访问私有变量和私有函数的公有方法。 函数外部无法访问函数内部的局部变量,但函数内部的函数可以访问本函数内的局部变量,故通过闭包实现函数外部访问函…

    2025年3月7日 编程技术
    200

发表回复

登录后才能评论