JS构造函数（js构造函数的八种方法）

旧时南风 • 2022-05-11 07:51:57 • 教育

构造函数

所谓”构造函数”，就是专门用来生成实例对象的函数。它就是对象的模板，描述实例对象的基本结构。一个构造函数，可以生成多个实例对象，这些实例对象都有相同的结构。

构造函数内部的 this

案例1：函数内部不使用 this


var f1 = function(){
	a = 1;
}
var o1 = new f1();
console.log(o1.a);  // undefined

1.测试

案例2：函数内部使用 this

var f2 = function(){
	this.a=1;
}
var o2 = new f2()
console.log(o2.a);  // 1

2.测试

new 构造函数

案例3：使用 new

var o1 = new f1();
console.log( o1 );

3.测试

案例4：不使用 new

var o2 =  f1();
console.log( o2 ); // undefined

4.测试

函数内部的 return

案例5：没有 return 语句 , new 构造函数返回： this。

var that ;
var f3 = function(){
 	 that = this;
}
console.log('new f3())===that:',(new f3())===that); // true

5.验证

案例6: return 一个对象，new 构造函数返回：该对象。

var obj ;
var f3 = function(){
 	 obj = {a:3}
  return obj;
}
console.log('(new f3())===obj:',(new f3())===obj); // true

6.验证

案例7：return 一个值，new 构造函数返回： this。

var value ;
var that;
var f3 = function(){
  that = this;
 	value = 1;
  return value;
}
console.log('(new f3())===value:',(new f3())===value); // false
console.log('(new f3())===that:',(new f3())===that); // true 实际返回 this

7.验证

保证构造函数必须与 new 命令一起使用

案例8：使用 'use strict'

function f4(){
  'use strict';
  this.a = 2;
}

f4() // 没有使用new: 报错 
//原因：由于严格模式中，函数内部的this不能指向全局对象，默认等于undefined，导致不加new调用会报错（JavaScript 不允许对undefined添加属性）

8.验证

案例9：在构造函数内部判断

function f5(){
  if( !( this instanceof  f5 ) ){
    return new f5();
  }
 this.a =1; 
}
console.log( new f5().a ); // 使用new: 1
console.log( f5().a ); //  没有使用new: 1

9.验证

案例10：new.target

function f6() {
  if (!new.target) { // 如果当前函数是new命令调用，new.target指向当前函数，否则为undefined。
    throw new Error('请使用 new 命令调用！');
  }
  // ...
}

f6() // 没有使用new: 报错

10.验证

通过现有的对象创建一个新对象

案例11：

var obj1 = { a:1 }
var obj2 = Object.create(obj1)
console.log('obj1===obj2',obj1===obj2) //false

11.验证

JS构造函数（js构造函数的八种方法）

相关推荐

真我GTNeo3值不值得买（真我GTNeo3到底值不值得买测评）

cf不能全屏怎么解决win7（cf不能全屏win7的解决方法操作技巧）

卤水的使用及保存方法（卤水的使用和保管及卤水香料作用）

底妆不卡粉小技巧（底妆如何清透不卡粉）

葱油秋葵的做法（家常葱油秋葵的做法步骤）

电脑上好用的视频格式转换器（可以转换视频格式的电脑软件）

发表评论