美文网首页
JavaScript构造函数

JavaScript构造函数

作者: iMikasa_ | 来源:发表于2022-01-02 20:31 被阅读0次

最近在学习React框架,虽然学完之后,掌握了React的语法,但是我在学习过程中发现,例如我利用React创建组件的时候发现我原生JavaScript亦或者是ES语法都掌握的十分不熟练,我之前掌握的知识体系就像个💩,我之前都太小瞧JS了...

从构造函数开始

before write

为啥从构造函数开始呢?因为我乐意😏,我希望我的读者都是技术素养高的人类,面向对象编程等偏概念性、理论性的东东我就不说了,我记录的都是备忘录类的东东,以备朕的需要。好了,朕不婆婆妈妈的啦。

啥是构造函数

像典型的面向对象编程语言如java,都有类的概念,而类里面有一个方法,叫构造器,我们程序员就是通过这个构造器并以类为模板来创建我们所需的对象,在JS中也有这样的构造器,我们叫他构造函数

构造函数长啥样

构造函数她也是函数,其实很简单,长这样

function Student(name){
    this.name = name;
}

还有函数表达式样式的

let Car = function(wl_count){
    this.wheel = wl_count;
}

规则:为了和普通函数区别,构造函数的函数名都要大写,而函数体内的this.啥啥啥的是在实例化对象的时候初始化对象属性的。之后会写专门介绍this的文章。

如何通过构造函数创建实例对象

我们通过new关键字创建对象
很简单

let ssa = new Student("imikasa");
let benCi = new Car(6);
值得注意的一些事情

因为构造函数也是函数吧,所以肯定会有熊孩子像调用普通函数一样调用构造函数,那会发生什么事情呢?我们试试看呗

let obj = Student("tim");          //不用new调用构造函数
console.log(obj);                  //undefined
console.log(name);                 //tim

我们发现全局中并没有我想要的obj对象,但是对象中的name属性值却暴漏给了全局,这样实在是太糟糕了。
原因是我们直接调用了构造函数,而调用者是全局对象,因为我的运行js的环境是浏览器,所以是window调用的构造函数,进入构造函数体内会为全局挂载这个name属性,所以之后这个name就变成了全局变量了。

  • 如何避免
    这样,函数内添加严格模式
function Fubar(foo, bar){
  'use strict';
  this._foo = foo;
  this._bar = bar;
}

Fubar()
// TypeError: Cannot set property '_foo' of undefined

或是这样

function Fubar(foo, bar) {
  if (!(this instanceof Fubar)) {
    return new Fubar(foo, bar);
  }

  this._foo = foo;
  this._bar = bar;
}

Fubar(1, 2)._foo // 1
(new Fubar(1, 2))._foo // 1

相关文章

  • 构造函数和原型对象

    javascript使用构造函数和原型对象来进行面向对象编程 构造函数 在 JavaScript 中,构造器其实就...

  • 原型与原型链

    构造函数与原型 JavaScript 语言使用构造函数(constructor)作为对象的模板。所谓”构造函数”,...

  • JavaScript 面向对象编程

    构造函数 JavaScript中的构造函数是创建对象时调用的函数,写法如下: 定义Person构造函数(默认构造函...

  • JavaScript的构造函数扩展、继承以及封装

    构造函数的扩展 扩展Man构造函数 构造函数的继承 Dog 继承 Pig JavaScript 内置对象的扩展 例...

  • javaScript面向对象—构造函数,原型和原型链

    构造函数 什么是构造函数 在javaScript中,用new关键字来调用的函数,称为构造函数。一般将构造函数的首字...

  • 前端高频面试题之——原型链

    JavaScript中的构造函数 原型是什么 面向对象语言中,类派生实例,JavaScript的函数可以作为构造器...

  • 2018-11-22

    JavaScript的面向对象是基于constructor(构造函数)与prototype(原型链)的。 构造函数...

  • 22

    JavaScript的面向对象是基于constructor(构造函数)与prototype(原型链)的。 构造函数...

  • 面向对象2

    JavaScript的面向对象是基于constructor(构造函数)与prototype(原型链)的。 构造函数...

  • OOP-2

    JavaScript的面向对象是基于constructor(构造函数)与prototype(原型链)的。 构造函数...

网友评论

      本文标题:JavaScript构造函数

      本文链接:https://www.haomeiwen.com/subject/brxtcrtx.html