ES5 Objece.creat实现继承

Object.create()

  Object.create(proto [, propertiesObject ]) 是E5中提出的一种新的对象创建方式,第一个参数是要继承的原型,如果不是一个子函数,可以传一个null,第二个参数是对象的属性描述符,这个参数是可选的。

例1:

var A=function(){
  this.blood="lee";
}
A.prototype.setI=function(){
  console.log( this.blood)
}

var a=new A();
var newa=Object.create(a);

newa.setI()        //newa拥有了A的原型方法

例2:

function Car (desc) {
    this.desc = desc;
    this.color = "red";
}

Car.prototype = {
    getInfo: function() {
      return ‘A ‘ + this.color + ‘ ‘ + this.desc + ‘.‘;
    }
};

var car =  Object.create(Car.prototype);
car.color = "blue";     //改写
console.log(car.getInfo());    //结果为:A blue undefined.

在不支持Object.create方法的浏览器中,则可以使用以下代码

Object.create = Object.create || function(obj){
  var F = function(){};
  F.prototype = obj;

  return new F();
}
时间: 2024-11-26 09:36:30

ES5 Objece.creat实现继承的相关文章

关于es5与es6的继承比较

ES5中的继承 原理:首先对于属性方面,一般是在子构造函数里面调用父构造函数,通过call改变执行上下文,Father.call(this, name); 完成属性继承. 其次对原型上的方法继承,根据原型的向上查找规则,首先创建一个对象(该对象的__proto__指向父构造函数的原型),然后将该对象赋给子构造函数的原型 Son.prototype=Object.create(Father.prototype); 或者Son.prototype=new Father(); 经过上述操作(即连接了图

详解ES5和ES6的继承

ES5继承 构造函数.原型和实例的关系:每一个构造函数都有一个原型对象,每一个原型对象都有一个指向构造函数的指针,而每一个实例都包含一个指向原型对象的内部指针, 原型链实现继承 基本思想:利用原型让一个引用类型继承另一个引用类型的属性和方法,即让原型对象等于另一个类型的实例 基本模式: 1 function SuperType(){ 2 this.property = true; 3 } 4 SuperType.prototype.getSuperValue = function(){ 5 re

ES5和ES6中对于继承的实现方法

在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是通过将子类构造函数的原型作为父类构造函数的实例,这样就连通了子类-子类原型-父类,原型链的特点就是逐层查找,从子类开始一直往上直到所有对象的原型Object.prototype,找到属性方法之后就会停止查找,所以下层的属性方法会覆盖上层. 一个基本的基于原型链的继承过程大概是这样的: //先来个父类

浅谈es5和es6中的继承

首先给大家介绍下在es5中构造函数的继承 1 function A(){ 2 2 //构造函数A 3 3 this.name="我是A函数"; 4 4 } 5 5 6 6 A.prototype={ 7 7 constructor:A, 8 8 render(){ 9 9 console.log("我是A实例的render方法") 10 10 } 11 11 } 12 12 13 13 let a=new A(); 14 14 15 15 function B(a)

【译】ES5重要特性回顾

题记:作者有个观点,学习ES6之前,必须先懂ES5,恰巧和我的观点吻合,这里找到作者2014年写的讲的ES5的文章,因而翻译了下来.下面的内容捡重点翻译,不重要的略过,文中ES5和ES5.1含义相同. 原文:Thinking About ECMAScript 5 Parts ES5.1的浏览器支持情况 所有现代浏览器都支持ECMAScript 5.1(ie9+, chrome 19+, safari 5+, firefox 4+, opera 12+, Android 3+, Blackberr

再和“面向对象”谈恋爱 - 继承(五)

通过上一篇文章想必各位老铁已经熟悉了class了,这篇文章接着介绍继承.面向对象里最大的特点应该就属继承了.一个项目可能需要不断的迭代.完善.升级.那每一次的更新你是要重新写呢,还是在原有的基础上改吧改吧呢?当然,不是缺心眼的人肯定都会在原来的基础上改吧改吧,那这个改吧改吧就需要用到继承了. 在第二篇文章里说过原型实例跟构造函数之间的继承,并且还讲了一道推算题.最终我们明白,实例为什么能继承原型上的内容是因为prototype,所以在ES5里面想要继承的话就得通过原型,需要对prototype进

es6属性基础教学,30分钟包会

ES6基础智商划重点在实际开发中,ES6已经非常普及了.掌握ES6的知识变成了一种必须.尽管我们在使用时仍然需要经过babel编译. ES6彻底改变了前端的编码风格,可以说对于前端的影响非常巨大.值得高兴的是,如果你熟悉ES5,学习ES6并不需要花费太多的时间就可以掌握,因为常用的基础语法并不多,花少量的时间,就可以开始我们的ES6之旅了. 这篇文章不会详细的告诉你ES6的每一个细节知识,只会根据我自己的开发经验,将我在实际开发中常常用到的知识点分享给大家,给大家学习ES6一个方向的指引.这是因

vue 数组

今天项目中发现的一个问题: 在vue项目中输出一个数组,明明有俩个值:0,6,但是length为1 正常的是这样的 结果研究发现,是vue源码的问题,具体内容如下: 转载自:http://www.cnblogs.com/Darlietoothpaste/p/6682407.html Vue的数组操作的实现代码大致如下: 1 const aryMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse']; 2

ES6新特性:使用新方法定义javascript的Class

ES6中定义类的方式, 就是ES3和ES5中定义类的语法糖,虽然也有些区别,但是整体定义类的方式更加简洁,类的继承更加方便, 如果想对ES6中的继承更加熟悉, 最好了解ES5中原型继承的方式, 博客园中说JS继承的文章很多, 想要深入了解的同学自己去搜: 定义一个class: 每一个使用class方式定义的类默认都有一个constructor函数, 这个函数是构造函数的主函数, 该函数体内部的this指向生成的实例, say() {}为原型上的方法, 我们定义一个简单的类 : "use stri