Js创建对象的方法及原型链的分析

一.JS创建对象的几种方式

最近在看javascript高级程序设计,其中对对象的创建做了具体的阐述,可以进行总结一下。

第1种模式:工厂方式

var sayHello=function(){  

   return "Hello";
};
function student(){
       var  S1 = new Object();
       Child.name="小明";
       Child.age="18";
       Child.sayHello=sayHello;
     return student;
};  

var  x = student();
alert(x.name);
alert(x.sayHello());  

说明:

1.在函数中定义对象,并定义对象的各种属性,,虽然属性可以为方法,但是建议将属性为方法的属性定义到函数之外,这样可以避免重复创建该方法

2.引用该对象的时候,这里使用的是 var x = Parent()而不是 var x = new Parent();因为后者会可能出现很多问题(前者也成为工厂经典方式,后者称之为混合工厂方式),不推荐使用new的方式使用该对象

3.在函数的最后返回该对象

4.不推荐使用这种方式创建对象,但应该了解、

第2种模式:构造函数方式

var sayHello =function(){  

   return "Hello";
};
function student(){  

       this.name = "小明";
       this.age = "18";
       this.sayHello = sayHello;
};  

var  x =new  stdent();
alert(x.name);
alert(x.sayHello ());  

说明:

1.与工厂方式相比,使用构造函数方式创建对象,无需再函数内部重建创建对象,而使用this指代,并而函数无需明确return

2.同工厂模式一样,虽然属性的值可以为方法,仍建议将该方法定义在函数之外

3..同样的,不推荐使用这种方式创建对象,但仍需要了解

第3种模式:原型模式

var sayHello=function(){  

   return "hello";
};
function student(){  

};
  student.prototype.name="小明";
  student.prototype.age="18";
  student.prototype.sayhello=sayhello;  

var  x =new  student();
alert(x.name);
alert(x.sayhello());  

说明:

1.函数中不对属性进行定义

2.利用prototype属性对属性进行定义

3.同样的,不推荐使用这样方式创建对象

 

第四种模式:混合的构造函数,原型方式(推荐)

function student(){
  this.name="小明";
 this.age=18;  

};
Parent.prototype.sayname=function(){  

   return this.name;
};;  

var  x =new  student();  

alert(x.sayname());  

说明:1.该模式是指混合搭配使用构造函数方式和原型方式

2.将所有属性不是方法的属性定义在函数中(构造函数方式)

将所有属性值为方法的属性利用prototype在函数之外定义(原型方式)

这样做有利于所有实例共用一个函数,无需重复定义,定义在对象原型的函数能被所有实例调用。

第五种模式:动态原型方式

function student(){
  this.name="小明";
 this.age=18;
;
 if(typeof Parent.sayname=="undefined"){
       //直接在函数体内定义,如果函数没有被定义则进行定义
     Parent.prototype.sayname=function(){  

               return this.name;
     }
     Parent.sayname = true;
 }
};   

var  x =new  student();  

alert(x.sayname());  

说明:

1.动态原型方式可以理解为混合构造函数,原型方式的一个特例,只是对实例化对象前,进行了条件判断

2.该模式中,属性为方法的属性直接在函数中进行了定义,但是因为函数中存在条件判断语句,从而保证创建该对象的实例时,属性的方法不会被重复创建

3.推荐使用这种模式

二.对象的原型链

在知道几种常见的方式在JS中创建对象之后,再来了解下继承的问题。

首先应当明确在JavaScript中,一切都是对象(包括函数

JavaScript对每个创建的对象都会设置一个原型,指向它的原型对象;

(1) 例如创建一个Array对象时

var arr = [1, 2, 3];
此时原型链为:arr ----> Array.prototype ----> Object.prototype ----> null

(2) 创建一个函数

 
function foo() {
return 0;
}

它的原型链为:foo ----> Function.prototype ----> Object.prototype ----> null

当我们访问一个对象的属性时,JavaScript引擎先在当前对象上查找该属性,如果没有找到,就到其原型对象上找,如果还没有找到,就一直上溯到Object.prototype对象,最后,如果还没有找到,就只能返回undefined。

构造函数

除了直接用{..}创建一个对象外,JavaScript还可以用一种构造函数的方法来创建对象。它的用法是,先定义一个构造函数:

function Student(name) {

    this.name = name;

    this.hello = function () {

        alert(‘Hello, ‘ + this.name + ‘!‘);

    }

}

这和普通函数并没有区别,但是在JavaScript中,可以用关键子[ new ]来调用这个函数,并返回一个对象:

var xiaoming = new Student(‘小明‘);

xiaoming.name; // ‘小明‘

xiaoming.hello(); // Hello, 小明!

注意,如果不写new,这就是一个普通函数,它返回undefined。但是,如果写了new,它就变成了一个构造函数,它绑定的this指向新创建的对象,并默认返回this,也就是说,不需要在最后写return this;。

新创建的xiaoming的原型链是:

xiaoming ----> Student.prototype ----> Object.prototype ----> null

也就是说,xiaoming的原型指向函数Student的原型。如果你又创建了xiaohong、xiaojun,那么这些对象的原型与xiaoming是一样的:

xiaoming 

xiaohong -→ Student.prototype ----> Object.prototype ----> null

xiaojun  

用new Student()创建的对象还从原型上获得了一个constructor属性,它指向函数Student本身:

xiaoming.constructor === Student.prototype.constructor; // true

Student.prototype.constructor === Student; // true

Object.getPrototypeOf(xiaoming) === Student.prototype; // true

xiaoming instanceof Student; // true

红色箭头是原型链。注意,Student.prototype指向的对象就是xiaoming、xiaohong的原型对象,这个原型对象自己还有个属性constructor,指向Student函数本身。

另外,函数Student恰好有个属性prototype指向它的原型,但是xiaoming、xiaohong这些对象可没有prototype这个属性,不过可以用__proto__这个非标准用法来查看。

现在我们就认为xiaoming、xiaohong这些对象“继承”自Student。

以上是我决定近期学习JS的一些比较好参考资料与自己的心得体会

希望对大家有帮助

参考资料:《Javascript高级程序设计》

廖雪峰Blog 《JS教程》

时间: 2024-10-10 10:21:00

Js创建对象的方法及原型链的分析的相关文章

JS创建对象模式及其对象原型链探究(五):组合使用构造函数模式和原型模式

组合使用构造函数模式和原型模式 构造函数模式用于定义实例属性,原型模式用于定义方法和共享的属性. 创建自定义类型的最常见方式,就是组合使用构造函数模式和原型模式. 1.创建对象 // 组合使用构造函数模式和原型模式 function Person(name, age, job){ this.name = name; this.age = age; this.job = job; this.friend = ["Jenny", "Court"]; } Person.p

js中的对象、原型链机制、构造函数

一.在js中创建对象的方式 //一.字面量或直接量创建对象 var obj1 = { name:"zs", age:12 }; //二.通过new来创建对象 var obj2 = new Object(); obj2.name = "zs"; obj2.age = 16; //三.通过工厂函数来创建 function creatObj() { return {}; } //四.通过new 构造函数来创建 function Obj() { } //测试 var obj

js学习总结----深入扩展原型链模式常用的六种继承方式

一.可枚举和不可枚举 for in 循环在遍历的时候,默认的话可以把自己私有的和它所属类原型上的扩展的属性和方法都可以遍历到,但是一般情况下,我们遍历一个对象只需要遍历私有的即可,我们可以使用以下的判断进行处理.obj.propertyIsEnumerable(key) 或者obj.hasOwnProperty(key) 二.Object.create(proObj) 方法创建一个新的对象,但是要把proObj作为这个对象的原型 在IE6-8不兼容(ECMAscript5) 原理: functi

JS面向对象(2)——原型链

原型链用于ECMAScript的继承.其思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.说人话,我们知道,一个构造函数Subtype,其原型对象有一个指向构造函数的指针,这是联系构造函数和原型的桥梁,如果我让原型对象的指针指向了另一个原型,而另一个原型原本指向其构造函数的指针也指向了另一个原型,那么,这就是一个原型链了,原型上的属性会一层一层往下传递. function SuperType(){ this.property=true; } SuperType.prototype.ge

[js高手之路]从原型链开始图解继承到组合继承的产生

于javascript原型链的层层递进查找规则,以及原型对象(prototype)的共享特性,实现继承是非常简单的事情 一.把父类的实例对象赋给子类的原型对象(prototype),可以实现继承 1 function Person(){ 2 this.userName = 'ghostwu'; 3 } 4 Person.prototype.showUserName = function(){ 5 return this.userName; 6 } 7 function Teacher (){}

js构造函数的方法与原型prototype

把方法写在构造函数内的情况我们简称为函数内方法,把方法写在prototype属性上的情况我们简称为prototype上的方法 函数内的方法: 使用函数内的方法我们可以访问到函数内部的私有变量,如果我们通过构造函数new出来的对象需要我们操作构造函数内部的私有变量的话, 我们这个时候就要考虑使用函数内的方法. prototype上的方法: 当我们需要通过一个函数创建大量的对象,并且这些对象还都有许多的方法的时候;这时我们就要考虑在函数的prototype上添加这些方法. 这种情况下我们代码的内存占

js创建对象的方法

1. 使用Object构造函数来创建一个对象,下面代码创建了一个person对象,并用两种方式打印出了Name的属性值. var person = new Object(); person.name="kevin"; person.age=31; alert(person.name); alert(person["name"]) 2. 使用对象字面量创建一个对象:不要奇怪person["5"],这里是合法的:另外使用这种加括号的方式字段之间是可以

快速理解JS中的继承与原型链

语言是用来表达的工具.当我们需要代指某个东西的时候,通常称其为一个对象.在编程语言中,对象并不像真实世界中那样随处可见,随口可以指代.通常我们只有少数的原生对象,剩下的,需要我们自己去创建.在Java语言中,创建一只会“咯咯咯”叫的鸡时,我们是这么做的: public class Chicken{ public void makeSound(){ System.out.println("咯咯咯"); } } Chicken littleChicken = new Chicken();

从零开始学 Web 之 JS 高级(二)原型链,原型的继承

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN:https://blog.csdn.net/lvonve/ 在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目.现在就让我们一起进入 Web 前端学习的冒险之旅吧! 一.原型链 原型链