原型链,call/apply

150 阅读2分钟

1、如何构成原型链?

例1

//Grand.prototype.__proto__ = Object.prototype原型终端
Grand.prototype.lastName = "Yang";
function Grand() {

}
var grand = new Grand();

Father.prototype = grand;
function Father() {
    this.name = "handsome";
}
var father = new Father();

Son.prototype = father;
function Son(){
    this.hobby = "somking";
}
var son = new Son();

原型链例1-06-03 214949.jpg 2.原型链增删改查和原型都一样

例2

Grand.prototype.lastName = "Yang";
function Grand() {

}
var grand = new Grand();

Father.prototype = grand;
function Father() {
    this.name = "handsome";
    this.fortune = {
        card1:"visa",
    }
}
var father = new Father();

Son.prototype = father;
function Son(){
    this.hobby = "somking"; 
    }

var son = new Son();

例2.1-06-03 220816.jpg

例2.2-06-03 221400.jpg 例3

sayName里面的this指向是,谁调用的这个方法,this就指向谁

Person.prototype = {
    name : "a",
    sayName : function() {
        console.log(this.name);
    }
}
function Person() {
    this.name = "b";
}
var person = new Person();

例3.1-06-03 230421.jpg

例4

Person.prototype = {
    height:100,
}
function Person() {
    this.eat = function () {
        this.height ++;
    }
 }
var person = new Person();

例4-06-03 231235.jpg

var obj = {};//用这个
var obj = new Object();//原型obj.__proto__--->Object.prototype

4.Object.creat(原型)////只能放null和Object,不能原始值

例子1

var obj = {name:"sunny",age:123};
var obj1 = Object.create(obj);//obj1是对象了

例子2

Person.prototype.name="sunny";
function Person(){

}//
var person = Object.creat(Person.prototype);//和上面差不多相等了

特例

var obj = Object.create(null);

特例2021-06-04 084902.jpg 例子

var num = 123;
// num.toString();包装类包装--->new Number(num).toString();
Number.prototype.toString = function(){}
Number.prototype.__proto__=Object.prototype//方法的重写:同一个名字不同功能

例子

Object.prototype.toString=function(){
    return 'hahaha'
}//方法重写1
Person.prototype = {
    toString:function(){
        return "daoshu";
    }//自身就有,截断往终端找toString//重写法2
}
function Person(){

}
var person = new Person();


Object.prototype.toString
Number.prototype.toString
Array.prototype.toString
Boolean.prototype.toString
String.prototype.toString1
Number.prototype.toString=function(){
    return 'laoyangchipi';
}
var num =123,num='laoyangchipi'

例2

var obj = {};
var obj = Object.create(null);//第一步,不加,报错
// obj.toString = function() {
//     return '一朵烟花';
// }//第二步,加上toString,调用了它,打印结果
document.write(obj);//调用对象的隐式toString方法把对象的真实展示情况显示出来
// document.write(obj.toString());//其实调用的toString的结果,没有原型不能toString

Math.floor向下取整/Math.ceil向上取整/Math.random随意取数

新知识math-06-04 122118.jpg

math-06-04 122518.jpg

例子

for(var i = 0;i < 10;i ++){
    var num = Math.floor(Math.random()*100);
    console.log(num);
}

call/apply的作用:改变this指向 任何一个方法都可以.call,利用别人的方法实现自己的功能

例1

function Person(name,age) {
    // this == obj
    this.name = name;//变成obj.name=name
    this.age = age;//不new的话this指向window
}

var person = new Person('xiong',100);

var obj = {}
Person.call(obj,'yang',100);
//第一位改变this指向,这时候obj=this,第2位开始传参
// Person.call()---Person()是一样的

call例1-06-04 132538.jpg

例2

function Person(name,age,sex) {
    this.name=name;
    this.age=age;
    this.sex=sex;
}

function Student(name,age,sex,tel,grade) {
    // var this={name:""...}
    Person.call(this,name,age,sex);//
    this.tel=tel;
    this.grade=grade;
}
var student = new Student('sunny',123,'male',139,2017);

例3

function Wheel(wheelSize,style) {
    this.style=style;
    this.wheelSize=wheelSize;
}

function Sit(c,sitColor) {
    this.c=c;
    this.sitColor=sitColor;
}

function Model(height,width,len) {
    this.height=height;
    this.width=width;
    this.len=len;
}

function Car(wheelSize,style,c,sitColor,height,width,len) {
    Wheel.call(this,wheelSize,style);
    Sit.call(this,c,sitColor);
    Model.call(this,height,width,len);
}
var car = new Car(100,'花花','真皮','yellow',1800,1900,4900);

apply和call不同在于传参列表不同,call把实参按照形参的个数传进去,apply需要传一个实参列表arguments Wheel.apply(this,[wheelSize,style]);//例子