码迷,mamicode.com
首页 > Web开发 > 详细

细说JS中的原型与原型链

时间:2017-10-12 20:26:08      阅读:242      评论:0      收藏:0      [点我收藏+]

标签:很多   ffffff   rip   自动   属性   总结   nbsp   原型对象   pre   

我们都知道,在javascript中,万物皆对象。但是,对象也是有区别的,分为普通对象和函数对象,说明走一波!

var o1 = {}; 
var o2 =new Object();
var o3 = new f1();

function f1(){}; 
var f2 = function(){};
var f3 = new Function(‘str‘,‘console.log(str)‘);

  如果我们对上面的变量进行console.log(typeof)的话,我们可以看到,o开头的结果都为object,f开头的结果为function!

一定要区分出函数对象和普通对象,下面会用到这个概念。

构造函数

function Person(name, age, job) {
 this.name = name;
 this.age = age;
 this.job = job;
 this.sayName = function() { alert(this.name) } 
}
var person1 = new Person(‘Zaxlct‘, 28, ‘Software Engineer‘);
var person2 = new Person(‘Mick‘, 23, ‘Doctor‘);

 重点来了,person1和person2都是Person的实例,这两个实例都有一个constructor(构造函数)属性,该属性是一个指针,指向Person!

    console.log(person1.constructor);
    console.log(person2.constructor);
  //打印结果都为
 //    function Person(name, age, job) {
 //    this.name = name;
 //    this.age = age;
 //    this.job = job;
 //    this.sayName = function() { alert(this.name) } 
}

所以可以得出第一个结论

  person1.constructor === Person;

  person2.constructor === Person;

Person是构造函数,person1和person2都是Person的实例

实例的构造函数属性(constructor)指向构造函数

 

原型对象

在javascript中,每当定义一个对象(函数也是对象),对象都会包含一些预定义的属性,其中每个函数对象都有一个prototype属性,这个属性指向函数的原型对象,所以反过来粗暴一点说,原型对象就是函数的prototype这个属性所指的对象,函数的对象的prototype的属性就是这个函数的原型对象。

不要慌,走个例子来个再来个总结就明白了

 

Person.prototype = {
   name:  ‘Zaxlct‘,
   age: 28,
   job: ‘Software Engineer‘,
   sayName: function() {
     alert(this.name);
   }
}

  这就是原型对象,明白吗,然后我们给这个原型对象添加很多很多的属性和sayName这个方法,当然,他还有一个对象constructor

 默认情况下,所有的原型对象,都会自动获得一个constructor(构造函数)这个属性,这个属性是一个指针,指向prototype属性所在的函数Person!

Person.prototype.constructor === Person

.和上面有点相似,千万不要混!

下面有个更混的,我们可以根据公式

person1.constructor == Person
Person.prototype.constructor == Person

  

 

细说JS中的原型与原型链

标签:很多   ffffff   rip   自动   属性   总结   nbsp   原型对象   pre   

原文地址:http://www.cnblogs.com/zhengsongjun/p/7657608.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!