javascript封装继承圣杯模式和命名空间,this,属性表示法介绍

继承发展史
传统形式—>原型链过多的继承了没用的元素
借用构造函数不能继承借用构造函数的原型
每次构造函数都要多走一个函数
共享原型不能随便改动自己的原型
圣杯模式有两种格式第一种
第二种
命名空间管理变量, 防止污染全局变量, 适用于模块化开发, 可以采用立即执行函数的形式
this
函数预编译过程 this—->window
全局作用域里this—->window
call/apply 可以

继承发展史

  1. 传统形式—>原型链

    • 过多的继承了没用的元素
      这里写图片描述
  2. 借用构造函数

    • 不能继承借用构造函数的原型
    • 每次构造函数都要多走一个函数
      这里写图片描述
  3. 共享原型

    • 不能随便改动自己的原型
      这里写图片描述
  4. 圣杯模式
    有两种格式

    • 第一种
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//圣杯模式
function inherit(Origin, Target) {
function F() {};
F.prototype = Origin.prototype;
Target.prototype = new F();
Target.prototype.constructor = Target;
Target.prototype.uber = Origin.prototype;//Target的真正原型
}
//constructor 属性返回对创建此对象的数组函数的引用。
Person.prototype.lastName = 'liu';
function Person() {}
function son() {}
inherit(Person, Son);
Son.prototype.age = 123;
var son = new Son;
  • 第二种
1
2
3
4
5
6
7
8
9
var inherit2 = (function(){
var F = function(){};
return function(Parent, Child){
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
Child.prototype.uber = Parent.prototype;
}
})();

命名空间

管理变量, 防止污染全局变量, 适用于模块化开发, 可以采用立即执行函数的形式
eg:
这里写图片描述


this

  1. 函数预编译过程 this—->window
    这里写图片描述
  2. 全局作用域里this—->window
  3. call/apply 可以改变函数运行时this的指向
  4. obj.func( ); func( )里面的this指向obj
    这里写图片描述

属性表示方法

  1. obj.prop
  2. obj[‘prop’]
    例: obj.name——–> obj[‘name’]
    例1
    这里写图片描述
    例2字符串拼接
    这里写图片描述
越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。坚持原创技术分享,您的支持将鼓励我继续创作!