JavaScript构造函数

JS构造函数详解

最新推荐文章于 2024-01-31 09:21:46 发布

weixin_33739646

最新推荐文章于 2024-01-31 09:21:46 发布

阅读量56

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sungangmo/p/6559552.html

本文深入探讨了JavaScript构造函数的工作原理，包括默认行为、通过new操作符创建实例的过程、构造函数内的return语句行为、利用Object.defineProperty进行属性定义、以及如何正确设置原型对象以避免constructor属性丢失。同时，还介绍了构造函数的其他高级用法。

1.默认函数首字母大写
2.构造函数并没有显示返回任何东西。new 操作符会自动创建给定的类型并返回他们，当调用构造函数时，new会自动创建this对象，且类型就是构造函数类型。
3.也可以在构造函数中显示调用return.如果返回的值是一个对象，它会代替新创建的对象实例返回。如果返回的值是一个原始类型，它会被忽略，新创建的实例会被返回。 
function Person( name){
       this.name =name;
     }
var p1=new Person('John');
4.因为构造函数也是函数，所以可以直接被调用，但是它的返回值为undefine，此时构造函数里面的this对象等于全局this对象。this.name其实就是创建一个全局的变量name。在严格模式下，当你补通过new 调用Person构造函数会出现错误。
5.也可以在构造函数中用Object.defineProperty()方法来帮助我们初始化：
function Person( name){
      Object.defineProperty(this, "name",{
        get :function(){
           return name;
        },
         set:function (newName){
          name =newName;
        },
        enumerable :true, //可枚举，默认为false
         configurable:true //可配置
       });
    }  
 var p1=new Person('John');
6.在构造函数中使用原型对象
Person.prototype ={
       sayName :function(){
          console.log(this.name);
       },
       toString :function(){
          return "[Person "+ this.name+"]" ;
       }
     };
使用字面量形式改写了原型对象改变了构造函数的属性，因此他指向Object而不是Person。这是因为原型对象具有一个constructor属性，这是其他对象实例所没有的。当一个函数被创建时，它的prototype属性也被创建，且该原型对象的constructor属性指向该函数。当使用对象字面量形式改写原型对象时，其constructor属性将被置为泛用对象Object.为了避免这一点，需要在改写原型对象的时候手动重置constructor,如下：
Person.prototype ={
       constructor :Person,        
       sayName :function(){
          console.log(this.name);
       },        
       toString :function(){
          return "[Person "+ this.name+"]" ;
       }
     };
7.其他的用法
function Zaomen(huawen){
		if(!(this instanceof Zaomen){
			return new Zaomen();
		}
		var _huawen='普通';
		if(huawen){
          _huawen=huawen;
		}
       this.suo='普通';
       this.huawen=_huawen;
       this.create=function(){
       	return '[锁头]'+this.suo+'===[花纹]'+this.huawen;
       }
	}
	var xiaozhang=new Zaomen("绚丽");
	alert('xiaozhang:'+xiaozhang.create());
 