##### 循环对象自身的属性

function Foo(name, age){
  this.name = name
}

Foo.prototype.alertName = function(){
  alert(this.name)
}

var f = new Foo('zhangsan');
f.printName = function(){
  console.log(this.name);
}

var item
for(item in f){
  //高级浏览器已经在for in中屏蔽了来自原型的属性
  //但是这里建议大家还是加上这个判断，保证程序的健壮性
  if(f.hasOwnProperty(item)){
    console.log(item);
  }
}

//构造函数
function Foo(name, age){
  this.name = name
}

Foo.prototype.alertName = function(){
  alert(this.name)
}

var f = new Foo('zhangsan');
f.printName = function(){
  console.log(this.name);
}
f.printName()
f.alertName()
f.toString()  //要去f.__proto__.__proto__({__defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, __lookupSetter__: ƒ, …})中查找

instanceof 用于判断引用类型属于哪个构造函数的方法

f instanceof Foo //true f的__proto__一层一层往上，能否对应到Foo.prototype
f instanceof Object //true

如何准确判断一个变量是数组变量

var arr = []
arr instanceof Array // true
typeof arr //object typeof是无法判断是否是数组的

一个原型链继承的例子

function Animal(){
  this.eat = function () {
    console.log('animal eat')
  }
}

function Dog(){
  this.bark = function () {
    console.log('dog bark');
  }
}

Dog.prototype = new Animal()

var hashiqi = new Dog();

描述new一个对象的过程

• 创建一个新对象
• this指向这个新对象
• 执行代码，即对this赋值
• 返回this

function Foo(name, age){
  this.name = name;
  this.age = age;
  this.class = 'class-1'
}
var f = new Foo('zhangsan', 20)

zepto(或其他框架)源码中如何使用原型链

• 阅读源码是高效提高技能的方式
• 但不能“埋头苦钻”有技巧在其中
• 慕课网搜索“zepto设计和源码分析”

原型例子

function Elem(id){
  this.elem = document.getElementById(id);
}

Elem.prototype.html = function(val){
  var elem =  = this.elem
  if(val){
    elem.innerHTML = val
    return this
  } else {
    return elem.innerHTML
  }
}
Elem.prototype.on = function(type, fn){
  var elem = this.elem
  elem.addEventListener(type, fn)
  return this;
}
var div1 = new Elem('div1');

//div1.html('<p>111</p>');
div1.html('<p>111</p>').on('click', function(){
  alert('clicked');
}).html('<p>222/p>');

example

function Foo(name, age){
  this.name = name;
  this.age = age;
  this.class = 'class-1'
  return {x: 10}
}
var f = new Foo('zhangsan', 20)
f//{x: 10} 

this

//this要在执行时才能确认值，定义时无法确认
var a = {
  name: 'A',
  fn: function(){
    console.log(this.name);
  }
}
a.fn();  //this === a
a.fn.call({name: 'B'}); //this === {name: 'B'}
var fn1 = a.fn;
fn1(); //this === window

• 作为构造函数执行
• 作为对象属性执行
• 作为普通函数执行
• call apply bind

function Foo(name){
  this.name = name;
}
var f = new Foo('zhangsan');
var obj = {
  name: 'A',
  printName: function(){
    console.log(this.name);
  }
}
obj.printName();
function fn() {
  console.log(this)
}
fn()

function fn1(name){
  alert(name);
  console.log(this);
}
fn1.call({x:100},'zhangsan',20)//Object{x:100}
fn1.call({x:100},['zhangsan',20])
var fn2 = function(name){
  alert(name);
  console.log(this);
}.band({y:200})
fn2('zhangsan', 20)

只关心在哪里定义 不关心声明

var a = 100
function F1(){
  var b = 200
  function F2(){
    var c = 300
    console.log(a)
    console.log(b)
    console.log(c)
  }
  F2()
}
F1()

闭包

function F1() {
  var a = 100
  return function (){
    console.log(a);  //自由变量，父作用域寻找
  }
}
var f1 = F1();
var a = 200
f1()

function F1(){
  var a = 100
  return function () {
    console.log(a)
  }
}
var f1 = F1()
function F2(fn){
  var a = 200
  fn()
}
F2(f1) //100

创建10个a标签 点击的时候弹出对应的序号

//错误
var i, a
for(i = 0; i < 10; i++){
  a = document.createElement('a')
  a.innerHTML = i + '<br>'
  a.addEventListener('click', function(e){
    e.preventDefault()
    alert(i)
  })
  document.body.appendChild(a)
}

//正确
var i
for(i = 0; i < 10; i++){
  (function(i){
    a = document.createElement('a')
    a.innerHTML = i + '<br>'
    a.addEventListener('click', function(e){
      e.preventDefault()
      alert(i)
    })
    document.body.appendChild(a)
  })(i)
}

实际开发中闭包的应用

//闭包实际应用中主要用于封装变量，收敛权限
function isFirstLoad(){
  var _list = []
  return function (id){
    if(_list.indexOf(id)>=0){
      return false
    } else {
      _list.push(id)
      return true
    }
  }
}
var firstLoad = isFirstLoad()
firstLoad(10);//true
firstLoad(10);//false
firstLoad(20);//true