前端开发:一些对象继承的方法

前端开发安卓官网|安卓开发前端技术论坛|vs前端开发实例

由于引用类型（数组、对象）是按地址传递，直接拷贝是浅拷贝，即修改拷贝后的变量，原变量也会改变。有时需要深拷贝一个对象，这时就需要遍历彻底复制，使原对象和拷贝对象完全脱离关系。

创建实例对象[/color]

var o={

color:’red’,

arr:[2,3,4,5],

fn:function(){

console.log(1);

}

var a=Object.create(o);

a.color=”blue”;

a.arr.push(2);

console.dir(a);

console.dir(o);会改变引用类型的地址

深拷贝，不会改变引用类型的地址

代码：

function deepCloneObj(obj){

var i;

var o = Array.isArray(obj) ? [] : {};

for(i in obj){

if(obj.hasOwnProperty(i)){

o[i] = typeof obj[i] === “Object”? deepCloneObj(obj[i]) : obj[i];

}

return o;

}

实现细节：假定传入的是一个引用类型，首先判定传入的是数组还是对象，根据判定结果，确定o是初始化为空数组还是空对象。之后遍历传入引用类型的自有属性，并判定属性是否为对象，如果是的话做递归，否则直接复制给o。

数组实例：

var arr1 = [“sfsag”,”akghak”,”[‘fafa’,’gaag’,’rwet’]”,125];

console.log(arr1);//[“sfsag”, “akghak”, “[‘fafa’,’gaag’,’rwet’]”, 125]

var arr2 = deepCloneObj(arr1);

arr1.push(“newstr”);

console.log(arr1);//[“sfsag”, “akghak”, “[‘fafa’,’gaag’,’rwet’]”, 125, “newstr”]

console.log(arr2);//[“sfsag”, “akghak”, “[‘fafa’,’gaag’,’rwet’]”, 125]

对象实例：

var obj1 = {sgsh:{sfwg:’ssgsg’},asga:[‘aff’,’ghh’,’wegwer’,12],segg:1};

console.log(obj1);//Object {sgsh: Object, asga: Array[4], segg: 1}

var obj2 = deepCloneObj(obj1);

obj1[‘newstr’] = [‘fsg’,’gsr’];

console.log(obj1);//Object {sgsh: Object, asga: Array[4], segg: 1, newstr: Array[2]}

console.log(obj2);//Object {sgsh: Object, asga: Array[4], segg: 1}

原型继承：[/color]

function fn(name){

this.name = name;

this.arr = [1,2,4,4];

}

fn.prototype={

method:function(){

console.log(1);

}

function ff(color){

this.color=color;

}

ff.prototype=newfn();

ff.prototype.constructor=fn;

只能继承方法，不能继承属性，父级构造函数的引用类型被所有实例共享是我们所不希望的；

3.构造函数继承

function Animal(name){

this.name = name;

this.lover = [‘sleep’,’eat’]

}

Animal.prototype={

jiao:function(){

console.log(1)

}

};

function Cat(color){

Animal.call(this,name)

this.color = color;

}

var cat = new Cat();

cat.lover.push(‘a’);

console.log(cat);

这种继承方式可以解决原型继承存在的问题，但是又产生了一个新的问题：没有办法继承父级原型中的成员

4 组合继承：[/color]

function Fruit(taste,name){

this.taste = taste;

this.name = name;

}

Fruit.prototype.sweeter = function(){

console.log(this.name + ‘的味道’ + this.taste + ‘变浓’);

}

function Watermelon(color,shape,taste,name){

Fruit.call(this,taste,name); //这会吧Fruit上的属性都会继承

this.color=color;

this.shape=shape;

}

Watermelon.prototype = new Fruit();//这条代码的作用会把原型上的方法都会继承

// Watermelon.prototype = Fruit.prototype //不推荐（会对原来的代码造成影响）

Watermelon.prototype.scroll = function(){

console.log(this.color+’颜色的水果’+this.shape+’形状的水果’+’正在滚动’);

}

5.extend()拷贝方法

//extend作用就是拷贝属性:把参数对象中的所有属性都拷贝到extend方法所在的对象里，如果属性已经存在那么就覆盖掉，如果没有这个属性就添加一个

var obj = {info:’hello’};

obj.extend = function(obj){

for(var key in obj){

//这里的this是obj

this[key] = obj[key];

}

};

obj.extend({info:’hi’,message:’hello tom and jerry’,abc:’nihao’});

console.dir(obj);

属性拷贝（jquery插件扩展的本质）

web前端开发实例|前端开发就业搞笑段子|前端开发就业趋势

前端开发:一些对象继承的方法

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发