从构造器函数认识javascript的原型继承机制

已被阅读 912 次 | 文章分类:javascript | 2018-04-23 16:57

在开发过程中Javascript构造器函数经常会遇到,那么构造器函数的存在价值是什么呢,为什么要使用构造器函数,该篇文章以几个方面带你认识构造器函数

一:构造器函数与普通函数的区别

如下是一个普通函数和构造器函数

                                            
//构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}
var person = new Person('xiaobai', 2); //this-->person
 console.log(person);    // {name:"xiaobai",age:2}
                            

//普通函数
function commanPerson(name, age) {
 console.log(name);
}
commanPerson('dabai', '3');//dabai
                                            
                                        

1.在命名规则上:构造函数是首字母大写,普通函数则是遵照小驼峰式命名法,首字母小写;

2.在函数调用的时候:构造函数通过new关键字创建实例;普通函数直接调用。

3.this指向:构造函数内部的this指向是新创建的person实例;普通函数内部的this指向调用函数的对象(如果没有对象调用,默认为window)不建议在普通函数中使用this关键字;

如果将构造函数以普通函数方式调用,那么函数内部this将指向window,this.name==window.name;所以如果前面有一个全局变量name,那么函数调用之后将覆盖name,造成变量污染;

                                            
var name = "pop";   //全局变量name
//构造函数
function Person(name, age) {
    this.name = name;   
    this.age = age;
}
var result = Person('xiaobai', 2); //this-->window ;window.name=='xioabai'
console.log(result);    // undefined
console.log(name);      //xiaobai
                                            
                                        

二:创建JavaScript对象的两种方式。

在JavaScript中,创建对象的方式包括两种:对象字面量和使用new表达式。对象字面量是一种灵活方便的书写方式,例如:

                                            
var object1= {
  name: "xiaobai",
  alertF: function () {
      alert("字面量构造对象");
  }
}
console.log(object1);       //{name:'xiaobai',alertf:f}
                     

function Person(name) {
  this.name = name;
  this.alertp = function () {
    alert(this.name + "实例对象由构造函数创建");
  }
}
var object2 = new Person("xiaobai");
console.log(object2);      //{name:'xiaobai',alertf:f}
                                            
                                        

那么该如何选择正确的方式创建javascript对象呢,很简单如果是单个对象,毫无疑问字面量的方式简单明了,但是如果需要创建很多具有类似属性的对象,这个时候就需要用到构造函数创建对象了,构造函数类似于C#、Java中的class,可以将通过new 类实例化对象,这样省去了字面量每次创建对象需要重复写如上的name、alertF等属性信息,极大地节约了内存;这也是构造函数的基本存在价值一

三:构造函数的原型理解

关于构造函数原型链,继承的文章层次不群,可以算是一个难点,而且在面试中总会被问到;其实原型为了继承存在;javascript为了实现和C#、Java等语言同样的类继承功能,设计了原型; 先看如下构造函数实例

                                            
function Human() {
  this.name = "xiaobaigis";
  this.age = 21;
  }
var m = new Human();
                                            
                                        

当我们new一个对象实例的时候,原型是如何运作;一旦实例化

1.系统自动创建出构造函数的原型,Human.prototype

2.实例化对象m的__proto__属性指向自身构造函数的prototype //m._proto_==Human.prototype

在JS里,方法(Function)是对象,方法的原型(Function.prototype)是对象。因此它们都会具有对象共有的特点。

1.对象具有属性__proto__,可称为隐式原型,一个对象的隐式原型指向构造该对象的构造函数的原型,这也保证了实例能够访问在构造函数原型中定义的属性和方法。

2.方法这个特殊的对象,除了和其他对象一样有上述_proto_属性之外,还有自己特有的属性——原型属性(prototype),这个属性是一个指针,指向一个对象,这个对象的用途就是包含所有实例共享的属性和方法(我们把这个对象叫做原型对象)。原型对象也有一个属性,叫做constructor,这个属性包含了一个指针,指回原构造函数

四.构造函数实现继承:将子类的原型指向父类的实例

                                            
function Human() {
  this.name = "xiaobaigis";
  this.age = 21;
}
//将需要所有实例共享的方法、属性写进Human.prototype对象里
Human.prototype.alerttest = function (adj) {
    alert("xiaobaigis is "+adj);
}
function Man() {
}
//将父类Human的实例作为子类Man的原型  实现方法共享
Man.prototype = new Human();    
var m = new Man();
m.alerttest("cool");   //"xiaobaigis is cool"
                                            
                                        

QQ:3410192267 | 技术支持 微信:popstarqqsmall

Copyright ©2017 xiaobaigis.com . 版权所有 鲁ICP备17027716号