原型继承总结

最新推荐文章于 2021-05-13 10:19:21 发布

我是滑稽帝滑滑稽

最新推荐文章于 2021-05-13 10:19:21 发布

阅读量278

点赞数

分类专栏：前端JS 文章标签：原型继承 prototype call apply object.create

本文链接：https://blog.csdn.net/cacacacacacacaa/article/details/70142616

版权

前端JS 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<!--1.原型链-->
<!--2. call apply-->

<!--3. object.create()-->
<!--4.只继承原型-->

<!--5.浅拷贝深拷贝--> object.assign() 实现浅拷贝

<!--本总结暂时只讨论1-2-3-->

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<script>    //-----------------------one part-----------------------
function Person(first,last) {
    this.first = first;
    this.last = last;
    this.fullNameinstance = function () {
        return this.first+' instance '+this.last;
    }
}

Person.prototype = {
    fullName:function () {
        return this.first+' proto '+this.last;
    },
    fullNameReversed:function () {
        return this.last+','+this.first;
    }
};

var dw = new Person("din","wan");
alert(dw.fullNameinstance());
alert(dw.fullName());

function Goodperson(first,last) {
    this.first = first;
    this.last = last;
    this.goodfullnameinstance = function () {
        return this.first + 'good instance ' + this.last;
    }
};
Goodperson.prototype = new Person();
Goodperson.prototype.constructor = Goodperson;
Goodperson.prototype.goodfullname = function () {      //这个一定要写到前面这行代码的后面  否则会出错
    return this.first + ' good pro ' + this.last;
};
//    Goodperson.prototype = {                 这里是错误的  这是全覆盖  如果这样写后面的 good.fullname()就不能访问
//        goodfullname:function () {
//            return this.first + 'good' + this.last;
//        }
//    };
var good = new Goodperson("dada","wang");
alert(good.fullNameinstance());
alert(good.fullName());
alert(good.goodfullnameinstance());
alert(good.goodfullname());


//-----------------------two part-----------------------
function Person(first,last) {
    this.first = first;
    this.last = last;
    this.fullNameinstance = function () {
        return this.first+' instance '+this.last;
    }
};
Person.prototype = {
    fullName:function () {
        return this.last+'proto'+this.first;
    },
    fullNameReversed:function () {
        return this.last+','+this.first;
    }
};
var dw = new Person("din","wan");
alert(dw.fullNameinstance());     //--din instance wan
alert(dw.fullName());             //--din proto wan

function Student(first,last,id) {
    Person.call(this,first,last);     //call是function才有的    所以Person.prototype.call(this,first,last); 是不行的  也就是说call不能指向Person 的 prototype
    this.id = id;
    this.studentnameinstance = function () {
        return this.first + 'student instance ' + this.last;
    }
};
Student.prototype = new Person();
//    Student.prototype = {
//       getid:function () {
//           return this.id;
//       }
//    };    //如果这样写就会有问题
Student.prototype.getid = function () {
    return this.id;
};
Student.prototype.studnetnamePro = function () {
    return this.first + ' student pro ' + this.last;
};

var dinwan = new Student("din","wan","21");
alert(dinwan.fullNameinstance());   //--din instance wan
alert(dinwan.fullName());           //--din proto wan
alert(dinwan.studentnameinstance());  //--din student instance wan
alert(dinwan.studnetnamePro());       //--din student pro wan
alert(dinwan.getid());               //--21

//----------------------------three part-------------------------------
function Shape() {
	this.x = 0;
	this.y = 0;
}

Shape.prototype.move = function(x,y) {
	this.x += x;
	this.y += y;
	console.info("Shape moved.")
} ;

function Reatangle() {
	Shape.call(this); //call super constructor.
}

Rectangle.prototype = Object.create(Shape.prototype);

var rect = new Rectangle();

rect instanceof Rectangle //true.
rect instanceof Shape //true.

rect.move(1,1); //Outputs,"Shape moved"

</script>