1. 程式人生 > >原生js面向對象寫法

原生js面向對象寫法

.sh pro 成員方法 DC tel 一個 append init console

Mouse就是一個類,有自己的成員變量和成員方法,成員方法一定加上prototype,避免js原型的坑。

var Mouse = function(id)
{

    this.id = id;
    this.name = "";
    this.mes = null;//被創建的那個div
    this.con = null;
    this.runAwayInterval = null;

    this.init();
};

Mouse.prototype.init = function()
{
    // console.log("初始化id為 " + this.id + " 的mouse");
this.show(); } Mouse.prototype.show = function() { this.mes = document.createElement("div"); this.mes.setAttribute("id","mickey"); this.con = document.getElementById("container"); this.mes.style.opacity = 1; this.con.appendChild(this.mes); this.mes.onclick = function
() { getScore(); this.con.removeChild(this.mes); clearInterval(this.runAwayInterval); removeOneMouse(this.id); }.bind(this); // console.log(this.con.offsetWidth - 100); this.mes.style.left = Math.random()*(this.con.offsetWidth - 100).toString()+"px";
var targetTop = Math.random()*(this.con.offsetHeight - 100) +50; this.mes.style.top =targetTop +"px"; // this.mes.style.top = 0 +"px"; this.runAwayInterval = setInterval(this.runAway.bind(this),200); } Mouse.prototype.runAway = function() { // console.log("我是‘ "+ this.id +" ‘我正在跑..."); var opa = parseFloat(this.mes.style.opacity); opa -= 0.1; this.mes.style.opacity = opa; if(opa<=0) { this.lose(); } } // Mouse.prototype.beCatch = function() // { // this.con.removeChild(this.mes); // clearInterval(this.runAwayInterval); // } Mouse.prototype.lose = function() { // console.log("我是‘ "+ this.id +" ‘我成功跳走了..."); this.con.removeChild(this.mes); clearInterval(this.runAwayInterval); removeOneMouse(this.id); loseScore(); }

原生js面向對象寫法