js继承方式

#1默认原型继承

function inherint(C,P){

C.prototype = new P();

}

function Parent(name){

this.name =name||"Adam";

}

Parent.prototype.say = function(){

return this.name;

}

function Child(name){

// this.name = name;

}

inherint(Child,Parent);

var kid = new Child("lishuang");

kid.say();//"Adam"

this---

Child {name: "Adam", say: function}

缺点:

1继承了两个对象上的属性即添加到this上的和添加到原型上的,多数时不许这些自身属性

2每次需要一个子类都要调用继承函数

3原型上的引用属性会共享

#2借用构造函数

// 借用构造函数

function Article(){

this.tags =[‘js‘,‘css‘];

}

var article = new Article();

function BlogPost(){}

BlogPost.prototype = article;

var blog = new BlogPost();

// 注意以上不在需要new Article() 因为已经有了可用实例

function StaticPage(){

Article.call(this);

}

var page = new StaticPage();

console.log(article.hasOwnProperty(‘tags‘));

console.log(blog.hasOwnProperty(‘tags‘));  // 获取的是原型上引用

console.log(page.hasOwnProperty(‘tags‘));   //会创建一个副本而不是引用

true

false

true

//缺点:

无法从原型中继承任何东西,且原型也仅是添加可重用方法以及属性的位置不会为每个实力重新创建原型

、、优点

可以获得父对象自身成员的真实副本不存在子对象意外覆盖父对象属性的风险

#3 借用和设置原型

function Parent(name){

this.name =name||"Adam";

}

Parent.prototype.say = function(){

return this.name;

}

function Child(name){

Parent.apply(this,arguments);

}

Child.prototype = new Parent();

var kid = new Child("lishuang");

kid.name;

"lishuang"

kid.say()

"lishuang"

delete kid.name

true

kid.say()

"Adam"

#4  共享原型链------子孙对象修改原型会改变父对象的原型

function inherint(C,P){

C.prototype=P.prototype;

}

#5临时构造函数

function inherit(C,P){

var F = function(){};

F.prototype = P.prototype;

C.prototype = new F();

}

存储超类

function inherit(C,P){

var F = function(){};

F.prototype = P.prototype;

C.prototype = new F();

C.uber = P.prototype;

}

重置构造函数

var inherit = (function(){
   var F = function(){};

return function(C,P){

F.prototype = P.prototype;

C.prototype = new F();

C.uber = P.prototype;

C.prototype.constructor = C;

}

}())

5原型继承

function object(o){

function
F(){};

F.prototype
= o;

return
new F();

}

function Person(){

this.name
= "Adam";

}

Person.prototype.getName
=function(){

return
this.name;

}

var para = new
Person();

var kid = object(para);//改进var kid = object(Person.prototype);

kid.getName();

ECMAscript5 里用Object.create()实现

Object(parent,{})第二个参数可选

YUI3 Y.Object()方法

YUI().use(‘*‘,function(Y){

var child = Y.Object(parent);

})

6// 通过复制来实现继承

// 浅复制当属性是对象数组时会通过饮用传递存在修改父元素的风险

function
extend(parent,child){

var
i;

child
= child ||{};

for(i
in parent){

child[i]
= parent[i];

}

return
child;

}

// 深赋值

function
extendDeep(parent,child){

var i,

tostr=Object.prototype.toString,

astr = "[object Array]";

child=child||{};

for(i in parent){

if(parent.hasOwnProperty(i)){

if(typeof
parent[i] ==="object"){

child[i]
= (tostr.call(parent[i]))===astr?[]:{};

extendDeep(parent[i],child[i]);

}else{

child[i]
= parent[i];

}

}

}

return child;

}

函数绑定解决、回调函数与函数表达式的this指向全局对象问题

var one = {

name :"obj",

say:function(greet){return greet+",
" + this.name;}

}

one.say(‘hi‘);

//"hi,
obj"

var
say = one.say; say(‘hi‘);

//"hi,
"

function bind(o,m){

return function(){

return
m.apply(o,[].slice.call(arguments));//闭包是的函数返回后仍可访问o/m

};

}

ES5  中Function.prototype.bind的实现

if(typeof
Function.prototype.bind==="undefined"){

Function.prototype.bind
= function(thisArg){

var
fn = this,

slice = Array.prototype.slice,

arg= slice.call(arguments,1);

return function(){

return
fn.apply(thisArg,arg.concat(slice.call(arguments)));

}

}

}

时间: 2024-10-24 01:46:06

js继承方式的相关文章

js 继承方式

js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式1.使用对象冒充实现继承(该种实现方式可以实现多继承)实现原理:让父类的构造函数成为子类的方法,然后调用该子类的方法,通过this关键字给所有的属性和方法赋值 function Parent(firstname)   {       this.fname=firstname;       this.age=40;       thi

[JS]继承方式总结

方式一:原型链继承(prototype模式) function Animal(){ this.species = "动物"; } function Cat(name,color){ this.name = name; this.color = color; } Cat.prototype = new Animal();//核心 Cat.prototype.constructor = Cat; 缺点: 1.原型上的引用类型的属性和方法被所有实例共享(个人觉得这不应该算缺点,毕竟原型就是派

js继承方式(es5)

1.原型链 实现的本质是重写原型对象,代之以一个新类型的实例: 给原型添加方法的代码硬顶放在替换原型的语句之后: 不能使用对象字面量查收能见原型方法,这样会重写原型链. 缺点:包含引用类型值的原型属性会被所有实例共享:在创建子类型时,不能向超类型的构造函数中传递参数. 2.借用构造函数 在子类型构造函数的内部调用超类型构造函数: 可以在子类型构造函数中想超类型构造函数传递参数: 缺点:方法都在构造函数中定义,无法函数复用,且在超类型的原型中定义的方法对子类型不可见的. 3.组合继承 使用原型链实

js的5种继承方式——前端面试

js主要有以下几种继承方式:对象冒充,call()方法,apply()方法,原型链继承以及混合方式.下面就每种方法就代码讲解具体的继承是怎么实现的. 1.继承第一种方式:对象冒充 1 function Parent(username){ 2 this.username = username; 3 this.hello = function(){ 4 alert(this.username); 5 } 6 } 7 function Child(username,password){ 8 //通过以

js的6种继承方式

重新理解js的6种继承方式 注:本文引用于http://www.cnblogs.com/ayqy/p/4471638.html 重点看第三点 组合继承(最常用) 写在前面 一直不喜欢JS的OOP,在学习阶段好像也用不到,总觉得JS的OOP不伦不类的,可能是因为先接触了Java,所以对JS的OO部分有些抵触. 偏见归偏见,既然面试官问到了JS的OOP,那么说明这东西肯定是有用的,应该抛开偏见,认真地了解一下 约定 P.S.下面将展开一个有点长的故事,所以有必要提前约定共同语言: 1 2 3 4 5

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

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

重新理解JS的6种继承方式

写在前面 一直不喜欢JS的OOP,在学习阶段好像也用不到,总觉得JS的OOP不伦不类的,可能是因为先接触了Java,所以对JS的OO部分有些抵触. 偏见归偏见,既然面试官问到了JS的OOP,那么说明这东西肯定是有用的,应该抛开偏见,认真地了解一下 约定 P.S.下面将展开一个有点长的故事,所以有必要提前约定共同语言: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 /*  * 约定  */ function Fun(){     // 私有属性  

JS继承的实现方式

前言 JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一.那么如何在JS中实现继承呢?让我们拭目以待. JS继承的实现方式 既然要实现继承,那么首先我们得有一个父类,代码如下: // 定义一个动物类 function Animal (name) { // 属性 this.name = name || 'Animal'; // 实例方法 this.sleep = function(){ console.log(this.name + '正在睡觉!'); } } // 原型方法 Animal

js继承有5种实现方式

js继承有5种实现方式:1.继承第一种方式:对象冒充  function Parent(username){    this.username = username;    this.hello = function(){      alert(this.username);    }  }  function Child(username,password){    //通过以下3行实现将Parent的属性和方法追加到Child中,从而实现继承    //第一步:this.method是作为一