利用instanceof
来判断这个实例(p1)是不是这个构造函数(Person)实例化出来的对象
function Person(name,age){
this.name = name;
this.age = age;
}
let p1 = new Person('zhangsan',30);
function Student(){
}
/* console.log(p1 instanceof Person); */ /* =>true */
// console.log(p1 instanceof Student); /* =>false */
/* 万物皆对象 */
// console.log(p1);
// console.log(p1 instanceof Object)
原型链继承实例化对象
构造函数可以理解为一个类
function Person(){
this.head = 1;
this.foot = 2;
}
function Student(name,no){
this.name = name;
this.no = no;
}
/* 让学生类 继承 人类的两个脚和一个头的属性 */
/* Student的prototype指向一个Person的实例 */
Student.prototype = new Person();
/* 加上constructor属性,并将这个属性指回原来的构造函数 */
Student.prototype.constructor = Student;
let stu1 = new Student();
console.log(stu1);
console.log(stu1.head);
console.log(stu1.foot);
写一个类 Car color price 属性 */
类 Bmw 继承Car的所有属性 并实例化Bmw这个类
写个方法可以把 color 和 price 打印到页面上 */
function Car(){
this.color = '白色'
this.price = '100w'
}
function Bmw(){}
Bmw.prototype = new Car();
Bmw.prototype.constructor = Bmw;
let b1 = new Bmw();
console.log(b1.color);
console.log(b1.price);
console.log(b1);
原型链继承直接继承原型
function Person(){
}
Person.prototype.head = 1;
Person.prototype.foot = 2;
let p1 = new Person();
/* 不变的属性都可以直接写入Person.prototype */
function Student(){
}
/* Student想要继承Person的属性 */
/* 直接继承prototype */
Student.prototype = Person.prototype;
let stu1 = new Student();
console.log(stu1.head);
console.log(stu1.foot);
// console.log('stu1',stu1);
/* 缺点: */
/* 任何对Student.prototype的修改,都会反映到Person.prototype */
Student的constructor不会指向自己 */
Student.prototype.name = 'zhangsan'
console.log('p1',p1);
/* 写一个类 Car color price 属性 使用直接继承prototype的方式实现*/
/* 类 Bmw 继承Car的所有属性 并实例化Bmw这个类
写个方法可以把 color 和 price 打印到页面上 */
function Car(){
}
Car.prototype.color = '白色'
Car.prototype.price = '100w'
function Bmw(){
this.print = function (){
document.write(`${this.color}--${this.price}`);
}
}
Bmw.prototype = Car.prototype;
let b1 = new Bmw();
b1.print();
利用空对象作为中介
空对象,几乎不占内存
修改Student的prototype对象,不会影响到Person的prototype对象
function Car() { }
Car.prototype.color = '白色'
Car.prototype.price = '100w'
function f(){}
f.prototype = Car.prototype;
Bmw.prototype = new f();
Bmw.prototype.constructor = Bmw;
function Bmw() {
this.print = function () {
document.write(`${this.color}--${this.price}`);
}
}
let b1 = new Bmw();
b1.print();
利用空对象封装完成继承
/* 写一个类House price 属性 */
/* 类 Tangc name=“汤臣一品” 继承House 的所有属性 使用空对象封装的方法 实现继承 把 name和 price 打印到页面上 */
function House(){};
House.prototype.price='100w';
function Tangc(){this.name='汤臣一品'}
function a(child,parent){
function f(){}
f.prototype=parent.prototype;
child.prototype=new f();
child.prototype.constructor=child
}
a(Tangc,House)
let tan=new Tangc()
document.write(`${tan.name}<br>${tan.price}`);
原型方法清除字符串空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//清除字符串前面的空格
// String.prototype.clearQSpace=function(){
// return this.replace(/^\s+/,'')
// }
// let nstr=' abc'.clearQSpace()
// console.log(nstr);
//清除字符串后面的空格
// String.prototype.clearHSpace=function(){
// return this.replace(/\s+$/,'')
// }
// let nstr=' a bc '.clearHSpace()
// console.log(nstr);
//清除字符串前后的空格
// String.prototype.clearQHSpace=function(){
// return this.replace(/^\s+|\s+$/g,'')
// }
// let nstr=' a bc '.clearQHSpace()
// console.log(nstr);
//清除字符串所有的空格
String.prototype.clearAllSpace=function(){
return this.replace(/\s/g,'')
}
let nstr=' a bc '.clearAllSpace()
console.log(nstr);
let nstr2=' a df sd f bc '.clearAllSpace()
console.log(nstr2);
</script>
</body>
</html>
原型方法排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 请将如下数组使用原型方法排序,
// 要求:从大到小排序
// 从小到大排序
// var arr=[1,5,13,17,22,15,8,6];
Array.prototype.d=function(){
for (let i = 0; i < this.length; i++) {
for (let j = 0; j < this.length; j++) {
if(this[i]<this[j]){
var tmp=this[i] ;
this[i]=this[j];
this[j]=tmp
}
}
}
return this
}
let arr=[1,5,13,17,22,15,8,6].d()
document.write(`从小到大:<br>${arr}<br>`);
Array.prototype.x=function(){
for (let i = 0; i < this.length; i++) {
for (let j = 0; j < this.length; j++) {
if(this[i]>this[j]){
var tmp=this[i];
this[i]=this[j];
this[j]=tmp
}
}
}
return this
}
let arr2=[1,5,13,17,22,15,8,6].x();
document.write(`从大到小:<br>${arr2}`);
</script>
</body>
</html>
原型方法排重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
Array.prototype.pc = function () {
// var array = [5, 4, 26, 9, 4, 8, 5, 14];
var newarr = [];
for (let i = 0; i < this.length; i++) {
if (newarr.indexOf(this[i]) == -1) {
newarr.push(this[i])
}
}
return newarr
}
let narr=[5, 4, 26, 9, 4, 8, 5, 14].pc()
document.write(narr);
</script>
</body>
</html>