美文网首页
JS面向对象--构造函数

JS面向对象--构造函数

作者: FF_C | 来源:发表于2017-12-01 11:27 被阅读0次

至今我们学习了很多调用函数的方式:
圆括号直接调用
对象打点调用
定时器调用
事件处理函数调用
数组枚举调用

他们体现的不同点就是函数上下文不同 他们的this不一样

现在我们学习新的函数调用方法,用new运算符来调用函数

试着用new运算符调用一个函数:

function fun(){
  alert("你好")
}
new fun(); //你好  

函数可以执行
也就是说new是一个全新的调用函数的方式
我们关心的是,这个函数的上下文是

function fun(){
 // alert(this)   //object object
  this.name ="小明";
  this.age = 12;
  this.sex="男";

}
var obj = new fun(); 
alert(obj.age);   //12
//console.log(obj);  //fun{name:"小明",age:"12",”sex:"男"}

用new运算符调用一个函数的时候 ,会经历四步走
1,函数内部悄悄的创建一个局部变量,是一个空对象{}
2, 函数将自己的上下文设置为这个{},即所有语句中的this就表示这个空对象
3,函数将执行所有语句
4,所有语句执行后,函数将return这个对象,函数将把自己的上下文返回.

所以,遇见new操作符,马上想起四步走

目前为止,我们发现,这个new运算符能够调用函数,还能返回一个对象 ,
//构造函数,可以当做一个”类“ ,描述的是一类对象需要拥有的属性

function People(name,age,sex){
 // alert(this)   //object object
  this.name = name;
  this.age = age;
  this.sex=sex;

}
//类的实例
var xiaoming = new People("小明","12","男");
var xiaohong = new People("小红","15","女");
console.log(xiaoming);   //fun{name:"小明",age:"12",”sex:"男"}

console.log(xiaohong);

我们发现用new操作符,可以返回具有相同属性群的对象。
我们说,Peoples可以认为是一个”类“,xiaomming ,xiaohong,xiaoqing都是这个类的”实例“(instance)。
JS中没有类的概念,我们这里只有JAVA C++ C#做一个类比,JS中只有构造函数。当一个函数被new操作符调用的时候,这个函数就是一个构造函数,它总能返回一类具有相同属性群的对象,感觉在”构造东西“,所以这个函数很神奇,像一个模子,在制作类似的对象。
为了提醒其他程序员,这是一个必须用new调用的函数,换句话说提醒别人这是一个构造函数,这类函数的名字必须首字母大写。

我们看不用new操作符调用构造函数会发生什么 ;

function People(name,age,sex){
 // alert(this)   //object object
  this.name = name;
  this.age = age;
  this.sex=sex;

}
People("小明","12","男");
alert(age);     //12

由于我们直接调用了构造函数,此时就是标准的函数直接加圆括号调用 ,函数里面的this是window对象,所以,此时name age sex 都被设置成了window对象的属性,我们知道window对象的属性是全局变量。此时能够弹出12.

JS中没有Class关键字(ECMAScript2016增加了Class关键字),我们就是使用new操作符的时候,会按"四步走"创建一些具有相同属性群的实例,些时就感觉有了”类“,JS只提”构造函数‘,不提“类”。

Javascript不是一个面向对象(OO)的语言,它只是基于对象(bo).

小题目:

function fun(){}
这个函数是不是一个构造函数?答案是不知道,因为只要用new操作符调用一个函数,此时这个函数就是一个构造函数。至于函数名字没有大写,那只是习惯,不是语言要求

再来,这个函数是不是构造函数:

function People(name,age){
  this.name = name;
  this.age = age;
}

答案也是不确定!因为用new调用它就是一个构造函数,不用new调用就不是

var obj = People("小明",12);

函数根本就没有返回值,此时obj就是Null

obj == null  //true
obj.age;    //报错

**所以构造函数没有什么 ,就是全新的函数调用方式 **

相关文章

  • RYF javascript笔记3

    4. 面向对象编程 4.1面向对象编程概述 4.1.1简介 4.1.1.1构造函数 js没有“类”,而改用构造函数...

  • 创建js对象_new+构造函数

    1、js面向对象 2、new构造函数创建

  • 3-javascript 构造函数

    js中面向对象编程是基于构造函数(consstructor)和原型链(prototype)的。 构造函数作为对象的...

  • js原型prototype原型链__proto__以及必会的ne

    什么是构造函数 构造函数是典型的面向对象编程语言,js的对象语言体系,是基于构造函数和原型链的构造函数是生成对象实...

  • JS面向对象--构造函数

    至今我们学习了很多调用函数的方式:圆括号直接调用对象打点调用定时器调用事件处理函数调用数组枚举调用 他们体现的不同...

  • js原型链和继承的理解

    Object() Function() Array() 等等都为构造函数。Js 面向对象与传统oop 有些不同,语...

  • 01 面向对象

    -------------------【面向对象】------- ----《构造函数》--- 简介:所有的构造函数...

  • 面向对象五

    面向对象高级二 总结 PHP 里的面向对象、继承方式 JS 里的继承方式 call(构造函数伪装) 和 proto...

  • JS面向对象精要(二)_函数

    JS面向对象精要(一)_原始类型和引用类型JS面向对象精要(二)_函数JS面向对象精要(三)_理解对象JS面向对象...

  • JS面向对象精要(三)_理解对象

    JS面向对象精要(一)_原始类型和引用类型JS面向对象精要(二)_函数JS面向对象精要(三)_理解对象JS面向对象...

网友评论

      本文标题:JS面向对象--构造函数

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