欢迎光临散文网 会员登陆 & 注册

千锋教育JavaScript全套视频教程(10天学会Js,前端javascrip

2023-07-17 16:32 作者:蒜李狠  | 我要投稿

  一.原型

  原型的出现,就是为了解决 构造函数的缺点

  也就是给我们提供了一个给对象添加方法的机会

  不然构造函数只能给对象添加属性,不能合理的添加方法就太 LOW 了

  1.原型的概念

  每一个函数天生自带一个成员(属性和方法),叫做 prototype,是一个对象空间

  即然每一个函数都有,构造函数也是函数,构造函数也有这个对象空间

  这个 prototype 对象空间可以由函数名来访问

  即然prototype是个对象,那么我们就可以向prototype里面放入一些东西


  注意:prototype里面可以放入属性和方法,但是都是公有的,而且prototype里面的this也是指向new出来的实例对象


  function Person(name, age) {

    // 私有的属性

    this.name = name;

    this.age = age;

  this.show = function () {//注意:如果方法构造函数和原型上面都有,构造函数里面的优先

    return '我是构造函数里面的'

  }

  }


  给原型添加方法(公有的)

  Person.prototype.show = function () {

    return `我的名字叫${this.name},我今年${this.age}岁`;

  }


  Person.prototype.show1 = function () {

    return `我的名字叫${this.name},我今年${this.age}岁`;

  }


  Person.prototype.show2 = function () {

    return `我的名字叫${this.name},我今年${this.age}岁`;

  }


  // Person.prototype.sex = '男';


  let p1 = new Person('zhangsan', 20);

  let p2 = new Person('lisi', 30);

  console.log(p1.name);//zhangsan

  console.log(p1.age);//20

  console.log(p1.sex);//男,属性是来自原型上面的

  console.log(p1.show());//我的名字叫zhangsan,我今年20岁


  console.log(p1.show === p2.show);//true


  Array.prototype.push = function () { };//覆盖系统的push方法

  let a1 = [1, 2, 3];

  a1.push(4, 5, 6);

  console.log(a1);


  二.总结面向对象开发 - 混合开发

  1.构造函数 + 原型

  属性放到构造函数里面,合理的

  方法放到原型上面,也是合理的


  2.无论是构造函数还是原型,里面的this指向是一样的,都指向实例对象(new 出来的对象)


  3.简单的逻辑,面向过程合理,复杂的逻辑,面向对象


  三.面向过程改面向对象的规则

  1.变量或者常量 -> 变成属性

  2.函数 -> 变成方法

  3.注意this的指向 -> 箭头函数

  3.1.定时器->window

  3.2.事件处理函数->事件源(触发事件的元素对象)

  3.3.无论是构造函数还是原型,里面的this指向是一样的,都指向实例对象

 

 

  let a1= new Array()

  let arr1 = [1, 2, 3, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 5];

  let arr2 = [10, 20, 30, 30, 30, 30, 30, 30, 30, 40, 40, 40, 40, 40, 50];

  // console.log(arr);

  console.log(Object.prototype.toString.call(arr1))

  console.log(arr1.constructor)

  console.log(a1.constructor)

  console.log(Object.prototype.toString.call(a1))

千锋教育JavaScript全套视频教程(10天学会Js,前端javascrip的评论 (共 条)

分享到微博请遵守国家法律